最近在开发公司官网，需要用到资讯发布和产品发布等，因此要用到富文本编辑器，在使用tinymce时遇到一些问题，记录下来，以供参考：

一、基本配置步骤：

1、下载tinymce：网址 https://www.tinymce.com/download/

2、解压文件，将tinymce文件夹复制到Flask项目的static文件夹下

3、在static/js目录下新建tinymce_setup.js，并将下面的代码复制进去：

tinymce.init({
    //选择class为content的标签作为编辑器
    selector: '#rich_content',
    //方向从左到右
    directionality: 'ltr',
    //语言选择中文
    language: 'zh_CN',
    //高度为400
    height: 400,
    width: '100%',
    //工具栏上面的补丁按钮
    plugins: [
        'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table contextmenu directionality template paste textcolor',
        'codesample imageupload',
        'code paste',
    ],
    //工具栏的补丁按钮
    toolbar: 'insertfile undo redo styleselect \
     bold italic imageupload fontsizeselect forecolor backcolor emoticons \
     alignleft aligncenter alignright alignjustify \
     bullist numlist outdent indent \
     link image  \
     print preview media fullpage  \
     codesample fullscreen ',
    //字体大小
    fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
    //按tab不换行
    nonbreaking_force_tab: true,
    imageupload_url: "submit-image",
    paste_data_images: true,
});

4、在html文件中引入js文件

<script type="text/javascript" src="../../static/admin/js/jquery.form.min.js"></script>
<script src="../../static/admin/tinymce/js/tinymce/tinymce.min.js"></script>

5、效果图

image.png

二、遇到的问题及解决方法

1、图文编辑时图片上传问题

image.png

a、 图片无法上传（我使用的七牛云存储）

解决方法是在后端view里面写一个上传方法submit_image, 路由必须和基本配置的第3点里的imageupload_url一致，否则无法上传图片：

@admin_bp.route('/submit-image', methods=['GET', 'POST'])
def submit_image():
    '''富文本图片上传方法'''
    file = request.files['file']
    try:
        img = file.read()
        # print(img)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.PARAMERR, errmsg="图片读取失败")
    try:
        key = qiniu_image_store(img)
    except Exception as e:
        current_app.logger.error(e)

    img_url = constants.QINIU_DOMIN_PREFIX + key
    return '{"error":false,"path":"' + img_url + '"}'

b、提是crsf错误

image.png

后台错误提示

127.0.0.1 - - [27/Oct/2018 13:45:50] "POST /admin/submit-image HTTP/1
.1" 400 -

原因：没有添加crsf保护
但是要修改tinymce比较麻烦，所以我这里就不添加保护，改为临时关闭，在上传图片方法前面添加@csrf.exempt即可：
最终上传图片的方法为：

@admin_bp.route('/submit-image', methods=['GET', 'POST'])
@csrf.exempt
def submit_image():
    '''富文本图片上传方法'''
    file = request.files['file']
    try:
        img = file.read()
        # print(img)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.PARAMERR, errmsg="图片读取失败")
    try:
        key = qiniu_image_store(img)
    except Exception as e:
        current_app.logger.error(e)

    img_url = constants.QINIU_DOMIN_PREFIX + key
    return '{"error":false,"path":"' + img_url + '"}'

2、图文编辑效果

image.png

至此，解决问题！