本文介绍如何在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"