flask添加ckeditor实现粘贴图片

最近公司在使用flask框架开发一个后台管理系统，使用了flask框架。

但是有个需求摆在我面前“截图工具截图之后，直接粘贴进富文本框”。

下边我简述一下我的操作过程，顺带介绍一下自己踩过的坑。

一、下载ckeditor

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

https://ckeditor.com/ckeditor-4/download/

因为担心ckeditor5支持文档会不完善，所以使用了ckeditor4。

我选择了标准版，当然你也可以自定义插件，减小插件包的大小。下载之后解压到自己的项目中，如下图。

二、使用ckeditor

在需要渲染的页面打开，引入js，具体代码如下。

接着，在form表单类中使用TextAreaField

渲染时不要使用{{ wtf.quick_form(form) }}，采用下图的方式

三、重启项目，发现该富文本框已经渲染到了页面中

四、这时候还没有配置上传路径，所以导致图片无法上传。

五、参考官方文档https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html进行上传图片配置，如下图

六、将上传服务部署到上传路径，官方文档https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html让大家使用json进行response，好多网上现成的代码不能用，我进行了修改。

def gen_rnd_filename():
    filename_prefix = datetime.datetime.now().strftime(u'%Y%m%d%H%M%S')

    aa = '%s%s' % (filename_prefix, str(random.randrange(1000, 10000)))

    return aa


@src.route('/ckupload/', methods=['POST'])
def ckupload():
    """CKEditor file upload"""
    error = ''
    url = ''
    callback = request.args.get("CKEditorFuncNum")

    if request.method == 'POST' and 'upload' in request.files:
        fileobj = request.files['upload']
        fname, fext = os.path.splitext(fileobj.filename)
        rnd_name = '%s%s' % (gen_rnd_filename(), fext)

        filepath = os.path.join(src.static_folder, 'upload', rnd_name)

        # 检查路径是否存在，不存在则创建
        dirname = os.path.dirname(filepath)
        if not os.path.exists(dirname):
            try:
                os.makedirs(dirname)
            except:
                error = 'ERROR_CREATE_DIR'
        elif not os.access(dirname, os.W_OK):
            error = 'ERROR_DIR_NOT_WRITEABLE'

        if not error:
            fileobj.save(filepath)
            url = url_for('static', filename='%s/%s' % ('upload', rnd_name))
    else:
        error = 'post error'
    res1 = {
        "uploaded": 1,
        "fileName": rnd_name,
        "url": url
    }
    response = json.dumps(res1)
    return response

七、这时候你发现上传图片成功

八、但是但是但是、、、、、粘贴还是不行！！！~~~~为啥呢？？？？

通过查看网络包，发现正常上传的时候网络包请求是这样的：127.0.0.1:9000/srcpm/src/ckupload/

当你截图之后粘贴的时候是这样的127.0.0.1:9000/srcpm/src/ckupload/&responseType=json

通过人肉debug，我们发现，是ckeditor为php之类的get请求准备的，在问号后边添加参数，表明自己想要的响应类型。

这是固有bug啊！

改它！

将ckeditor.js文件中的这两个双引号中的内容删掉，就完美解决啦~~