在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>>
1 开发要点
现在网上有很多的富文本编辑器,包括Markdown、tinymce、UEditor、KindEditor、ckeditor等等。在项目中使用这些编辑器主要有以下几个问题:
编辑页面
在HTML页面渲染编辑器;
定制编辑器的功能,比如有哪些文本样式、图片上传、代码插入;
定制编辑器的样式,指的是编辑器整体的样式,比如高度、宽度、显示位置等等;
预览内容;
获取内容;
显示页面
显示内容;
2 Django APP
下表列出一些常用的APP,它们都可以在GitHub上找的到,链接见下文。
APP | django-ckeditor | django-tinymce | django-markdown-denx | django-wmd-editor |
编辑器 | ckeditor | tinymce | markdown | markdown |
models.Field | fields.RichTextField | HTMLField | N | models.MarkDownField |
forms.Field | fields.RichTextFormField | N | N | N |
widget | widgets.CKEditorWiget |
wigets.TinyMEC widgets.AdminTinyMEC |
N |
widgets.MarkDownInput wigets.AdminMarkDownInput |
tempatetags | N | tinymce_tags | markdown_denx_tags | N |
static/media | Y | Y | Y | Y |
settings | __init__ | settings | conf.settings | __init__ |
备注 | 图片处理 | 文件处理 |
(Y表示有这项功能,N表示没有这项功能)
上述表格列出了每个模块各个APP所提供的功能:
后两个APP一个是编辑器,一个是显示内容的,需要结合使用
tinymce提供了最多的功能。
forms.Field可以由models.Field + widget实现。
3 基本入门
虽然使用的编辑器不同,但入门还是有通用步骤的。
3.1 安装APP
使用pip命令安装:pip install your-app-name
3.2 配置项目
在INSTALL_APPS加入app
运行python manage.py collectstaticfiles或者直接把静态文件复制到项目的static目录下
3.3 渲染编辑器
Model层
在需要编辑器的models.TextField字段直接替换为对应的*models.Field*
Form层
有提供forms.Field的可以直接使用,如CK可直接使用fields.RichTextFormField;
content = forms.RichTextFormField(label='内容')
否则使用指定widget的方式。
content = forms.TextField(label='内容', widget=wigets.TinyMEC)
template层
加载css/js文件,直接使用script或则link标签(前提是要知道都加载了哪些文件),或者使用下面变量赋值的方法,它展开之后就是一串的script和link标签
<head>{{ form.media }}
</head>
3.4 显示内容
通过模板过滤器来显示,即
Tinymce
{% load tinymce_tags %}{{ content| tinymce_preview }}
markdown
{% load markdown_deux_tags %}
{{ content|markdown }}
4 高级自定义
4.1 自定义编辑器样式功能
在widget构造函数传入的attrs参数,attrs是一个表示HTML元素属性-值的字典。参考Django文档。
class DemoForm(forms.Form):content = forms.CharField(widget=widgets.TinyMCE(attrs={'width':'500px', 'height':'200px'}))
4.2 其他设置
这部分因各个APP而不同,主要在项目settings模块设置,不过它们都有默认值,具体可参考官方文档。
5 参考资料
本文根据以下开源项目整理
shaunsephton/django-ckeditor · GitHub
https://github.com/shaunsephton/django-ckeditor
aljosa/django-tinymce · GitHub
https://github.com/aljosa/django-tinymce
jpartogi/django-wmd-editor · GitHub
https://github.com/jpartogi/django-wmd-editor
trentm/django-markdown-deux · GitHub
https://github.com/trentm/django-markdown-deux
转载于:https://my.oschina.net/kinegratii/blog/308408
在Django项目中使用富文本编辑器相关推荐
- react html编辑器,react项目中使用富文本编辑器
安装: cnpm install -D draft-js draftjs-to-html react-draft-wysiwyg // 用来指定商品详情的富文本编辑库 import React, { ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .
首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...
- Vue cli项目,使用富文本编辑器WangEditor,8小时摸爬滚打后,弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传 竟然存的是 ...
- vue项目中使用富文本wangEditor插件 出现的 The given range isn‘t in document错误
背景 近期做的后台管理系统,需要有一个富文本编辑器来录入一些API文档的功能.调研时,用UEditor,去github直接下资源包,然后引入到项目中.然而由于项目是一个vue项目,UEditor的实现 ...
- React中使用富文本编辑器Quill,支持粘贴图片
最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中. 由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源 ...
- vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
最新文章
- [分享]iOS开发-UI篇:CAlayer层的属性
- 使用Jmeter至WebService压力测试
- C++11 运行时变量类型判断
- editor修改样式 vue_手摸手Electron + Vue实战教程(三)
- git基础-远程仓库的使用
- 汇编语言---计算有符号数算式的值
- python怎么算积分_python计算积分
- 电力系统——基于10机39节点的电力系统仿真(Matlab)
- 概率图模型之隐马尔可夫模型
- flac怎样转换成mp3格式
- FPGA Verilog 编写的 可调时 数字钟
- springboot2 集成 elasticsearch8.2.3 CRUD操作
- Anaconda3最新版2022版的下载安装配置及使用教程(建议收藏,持续更新..)
- 多功能搜索友联自助交换多色彩皮肤网站图片本地化附带交易系统网址导航源码蜘蛛
- python列表删除元素问题+指针问题进阶杂谈
- 分享跨境电商亚马逊大件产品运营方案案例
- mysql 输出名称_MySQL常用的SQL语句//输出所有信息showfullfieldsfrom'表名称';//改表
- 如何选择良好的视觉引导定位技术?
- YII 框架 php
- 餐饮水单打印软件_火锅店连锁企业使用哪款生鲜管理系统软件比较好呢?