在Django项目中使用富文本编辑器
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