Python - Flask 整合 UEditor

1. 引言

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

官方文档地址：http://fex.baidu.com/ueditor/

下载：https://download.csdn.net/download/wanzijy/87136139

2. 后端

文档地址：http://fex.baidu.com/ueditor/#dev-request_specification

示例：

新建一个 python 文件

from flask import Blueprint, request, render_template

ueditor = Blueprint("ueditor", __name__) // 记得要注册该蓝图，在此处不再进行演示

@ueditor.route('/uedit', methods=['GET', 'POST'])  //  此处的url与待会前端初始化时的serverUrl要一致
def uedit():
    """
    根据UEditor的接口定义规则, 如果前端参数为action=config，则表示试图请求后台的config.json文件
    请求成功则说明后台接口正常工作
    """
    param = request.args.get('action')
    if request.method == 'GET' and param == 'config':  //  对应上面图片中的url
        return render_template('config.json')

3. 前端 - 定制工具栏

自行新建一个 html 页面，首先引入上面下载的 JS 文件，然后对工具栏进行初始化
详细的介绍可以看官方文档：http://fex.baidu.com/ueditor/#start-config

下面是本人较为常用的工具栏

<script type="text/javascript" src="/resource/ue/ueditor.config.js"></script>
<script type="text/javascript" src="/resource/ue/ueditor.all.min.js"></script>

<script type="text/javascript">
        var ue = UE.getEditor('content', {
            initialFrameHeight: 400,
            autoHeightEnabled: true,
            serverUrl: '/uedit',  //  与上述后端定义的蓝图中的url一致
            toolbars: [[  //  指定工具栏图标
                'fontfamily',  //  字体
                'fontsize',  //  字号
                'paragraph',  //  段落格式
                '|',  //  可利用竖线作为工具栏分隔符
                'justifyleft',  //  居左对齐
                'justifycenter',  //  居中对齐
                'justifyright',  //  居右对齐
                'forecolor',  //  字体颜色
                'bold',  //  加粗
                '|',
                'formatmatch',  //  格式刷
                'horizontal',  //  分隔线
                'link',  //  超链接
                'unlink',  //  取消超链接
                'simpleupload',  //  单图上传
                'insertimage',  //  单图上传
                'emotion',  //  表情
                'spechars',  //  特殊字符
                '|',
                'fullscreen',  //  全屏
                'autotypeset',  //  自动排版
                'removeformat',  //  清除格式
                'insertcode',  //  代码语言
            ]]
        });
</script>

页面效果如下：

4. 上传图片演示

先看文档

4.1 后端

在上面定义的控制器中，增加 /uploadimage 请求；如下：

from flask import Blueprint, request, render_template

ueditor = Blueprint("ueditor", __name__) // 记得要注册该蓝图，在此处不再进行演示

@ueditor.route('/uedit', methods=['GET', 'POST'])  //  此处的url与待会前端初始化时的serverUrl要一致
def uedit():
    """
    根据UEditor的接口定义规则, 如果前端参数为action=config，则表示试图请求后台的config.json文件
    请求成功则说明后台接口正常工作(本人直接将config文件放在了resource目录下)
    """
    param = request.args.get('action')
    if request.method == 'GET' and param == 'config':  //  对应上面图片中的url
        return render_template('config.json')
    elif request.method == 'POST' and request.args.get('action') == 'uploadimage':
    	//  业务逻辑 ...

也就是说，只要后台提供了官方文档中规定的 url ，即能实现对应工具栏中的功能