# 更新（2017/9/30）
可以考虑使用扩展Flask-CKEditor，详情见文章《Flask-CKEditor——为Flask项目集成富文本编辑器》。
什么是富文本编辑器？
如果你已经知道什么是富文本编辑器，可以跳到第三段。
简单来说，富文本编辑器就是网页版的Office Word，只不过Word保存.docx格式的文件，它保存HTML代码。之所以叫富文本编辑器（Rich Text Editor），是因为它提供了很多格式工具，比如添加标题，加粗文本等等，所以它又叫做所见即所得编辑器（WYSIWYG – What You See Is What You Get）。与富文本相对的不是穷文本，而是纯文本（Plain text）。比如你在HTML里用input标签生成的输入框，保存的数据就是纯文本。
富文本编辑器ckeditor
在《Flask Web开发》里，作者为博客添加了一个Markdown编辑器，但是事实上，Markdown并没有得到广泛的支持。基于易用性的考虑，你可能想为你的项目添加一个富文本编辑器。
二选一
对于初学者来说，网上的学习资源太多了，太多的选择首先就是一个问题。你要知道自己需要什么，在不清楚自己需求的情况下，就选一个最常用的。选工具也是这样。基于这些考虑，同类事务，我只推荐一到两个我认为最好的或是最易用的。
- 不要在入门上花费太多时间；先求深度后求广度。
- 从需求出发选择工具。
第一个：CKEditor
第二个：TinyMCE
这两个编辑器都是开源项目，而且都有丰富的文档。你可以到各自的网站体验一下。
另外，附上这两个编辑器的slogan，你可以做个考量：
- CKEditor：The Best Web Text Editor for Everyone
- TinyMCE：The Most Advanced WYSIWYG HTML Editor
选好了吗？那就开始配置吧！二者的配置都相当简单，加上在Flask表单：自定义表单样式里的内容，我们可以很容易的配置成功。
配置CKEditor
使用CDN
最方便的方式是使用CDN。
首先在表单类里使用定义一个TextAreaField字段（从wtforms导入）：
...
body = TextAreaField(u'正文', validators=[DataRequired(u'内容不能为空！')])
...
然后在要添加编辑器的模板头部添加head块，加入CDN链接：
{% block head %}
{{ super() }}
<script src="//cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
{% endblock %}
如果你使用Flask-Bootstrap，加载其他的JavaScript或是CSS资源时，要使用Jinja2提供的super()函数向父块添加内容，而不是替换父块。更多内容见相关文档。
最后在渲染表单时添加一个ckeditor类到这个字段就可以了：
{{ form.body(class="ckeditor") }}
在本地加载
下载页面：http://ckeditor.com/download
CKeditor提供了三个版本可供选择：基础、标准和完全，还提供了自定义组件功能。
下载后解压放到你项目的static文件夹，然后在模板引入文件：
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
{% endblock %}
其他步骤相同。
需要注意的是，我在把文件直接放在static目录下时加载失败，嵌套了一个文件夹后成功：static/ck/ckeditor/，具体原因未知。
配置TinyMCE
使用CDN
首先在表单类里使用定义一个TextAreaField字段：
...
body = TextAreaField(u'正文', validators=[DataRequired(u'内容不能为空！')])
...
使用WTForms或是Flask-Bootstrap渲染表单：
...
{{ form.body() }} <!-- 使用WTForms -->
...
或是：
...
{{ wtf.form_field(form.body) }} <!-- 使用Flask-Bootstrap -->
...
在模板添加一个head块，然后加载CDN资源，并且初始化。
{% block head %}
{{ super() }}
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
{% endblock %}
如果你使用Flask-Bootstrap，加载其他的JavaScript或是CSS资源时，要使用Jinja2提供的super()函数向父块添加内容，而不是替换父块。更多内容见相关文档。
在本地加载
下载页面：https://www.tinymce.com/download/
下载后解压放到你项目的static文件夹，然后在模板引入文件并初始化：
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.min.js') }}"></script>
<script>tinymce.init({ selector:'textarea' });</script>
{% endblock %}
其他步骤相同。
如果需要更高级的配置，见各自网站上的文档。
富文本的渲染
渲染HTML格式的内容时要使用|safe后缀，这样可以让Jinja2不要转义HTML元素，类似这样：
{{ body|safe }}
关于Jinja2常用的语法和函数的总结，会有一篇文章。
– – – – –
更多关于Flask和Web开发的优质原创内容，欢迎关注Hello, Flask! – 知乎专栏。
