Flask项目集成富文本编辑器UEditor

本文介绍如何在Flask项目中集成富文本编辑器UEditor，并实现文件上传、图片上传、视频上传及涂鸦功能。

UEditor简介

UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

由于1.4.2版本之后的版本与之前版本存在较大的差异，本文以1.4.3版本为蓝本。

具体文档参见：http://fex-team.github.io/ueditor/

在Flask项目中加入UEditor

下载UEditor：

访问UEditor首页，下载1.4.3 PHP UTF-8版本的UEditor，并解压到Flask应用程序的static目录。解压之后的目录结构是这样的：

| static/
| | ueditor/
| | |+dialogs/
| | |+lang/
| | |+php/
| | |+themes/
| | |+third-party/
| | |-config.json
| | |-index.html
| | |-ueditor.all.js
| | |-ueditor.all.min.js
| | |-ueditor.config.js
| | |-ueditor.parse.js
| | |-ueditor.parse.min.js

+表示目录。

在项目中加入UEditor：

我们在Flask应用程序的templates目录新建一个index.html文件（可根据实际情况选择文件名，或者把代码加入需要使用UEditor的文件）：

在head标签加入下面几行：

html<script type="text/javascript" charset="utf-8" src="{
  { url_for('static', filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{
  { url_for('static', filename='ueditor/ueditor.all.min.js') }}"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="{
  { url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>

在body标签加入：

html<script id="editor"