为你的Flask项目添加富文本编辑器

# 更新(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

富文本编辑器ckeditor

在《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导入):

然后在要添加编辑器的模板头部添加head块,加入CDN链接:

如果你使用Flask-Bootstrap,加载其他的JavaScript或是CSS资源时,要使用Jinja2提供的super()函数向父块添加内容,而不是替换父块。更多内容见相关文档

最后在渲染表单时添加一个ckeditor类到这个字段就可以了:

 

在本地加载

下载页面:http://ckeditor.com/download

CKeditor提供了三个版本可供选择:基础、标准和完全,还提供了自定义组件功能。

下载后解压放到你项目的static文件夹,然后在模板引入文件:

其他步骤相同。

需要注意的是,我在把文件直接放在static目录下时加载失败,嵌套了一个文件夹后成功:static/ck/ckeditor/,具体原因未知。

 

配置TinyMCE

使用CDN

首先在表单类里使用定义一个TextAreaField字段:

使用WTForms或是Flask-Bootstrap渲染表单:

或是:

在模板添加一个head块,然后加载CDN资源,并且初始化。

如果你使用Flask-Bootstrap,加载其他的JavaScript或是CSS资源时,要使用Jinja2提供的super()函数向父块添加内容,而不是替换父块。更多内容见相关文档

 

在本地加载

下载页面:https://www.tinymce.com/download/

下载后解压放到你项目的static文件夹,然后在模板引入文件并初始化:

其他步骤相同。

如果需要更高级的配置,见各自网站上的文档。

 

富文本的渲染

渲染HTML格式的内容时要使用|safe后缀,这样可以让Jinja2不要转义HTML元素,类似这样:

关于Jinja2常用的语法和函数的总结,会有一篇文章。

– – – – –

更多关于Flask和Web开发的优质原创内容,欢迎关注Hello, Flask! – 知乎专栏

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*