# 更新（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标签生成的输入框，保存的数据就是纯文本。

在《Flask Web开发》里，作者为博客添加了一个Markdown编辑器，但是事实上，Markdown并没有得到广泛的支持。基于易用性的考虑，你可能想为你的项目添加一个富文本编辑器。

二选一

对于初学者来说，网上的学习资源太多了，太多的选择首先就是一个问题。你要知道自己需要什么，在不清楚自己需求的情况下，就选一个最常用的。选工具也是这样。基于这些考虑，同类事务，我只推荐一到两个我认为最好的或是最易用的。

• 不要在入门上花费太多时间；先求深度后求广度。
• 从需求出发选择工具。

第一个：CKEditor

http://ckeditor.com/

第二个：TinyMCE

https://www.tinymce.com/

这两个编辑器都是开源项目，而且都有丰富的文档。你可以到各自的网站体验一下。

另外，附上这两个编辑器的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! – 知乎专栏。