vue-quill-editor富文本编辑器上传图片优化

1.vue-quill-editor 缺陷：上传图片是base64
2.quill-image-extend-module 优点：可上传图片到服务器
缺陷：有的浏览器不支持复制粘贴图片 有的浏览器支持，但是base64的
3.quill-image-super-solution-module 优点：可复制粘贴图片到服务器
缺点：在火狐浏览器，复制doc文本后粘贴会出现标签乱码现象
大佬们可有兼容强的vue 富文本编辑器推荐

vue-quill-editor富文本编辑器本身自带点击图片上传的功能，但是上传后的图片是以base64的形式存储在数据库，这会造成数据库存储的过大，进而导致在查这个字段的数据的时候运行缓慢，在前端回显该数据，发起的请求的时候，请求的响应时间较长，用户体验不友好。
解决的方案有两种，一种是后端处理成 图片存储在服务端，然后以；链接的形式返回。但是在提交富文本时也会出现提交请求返回缓慢的问题。一种是由前端处理。尝试过quill-image-extend-module，但是这个组件不够完善，在插入图片时会出现光标在文字上面，但是图片被插入到了文字下面等情况
目前比较好用的是quill-image-super-solution-module，他在quill-image-extend-module的基础上做了优化，解决了一些bug

 下载安装运用
 Install

   npm install quill-image-super-solution-module --save-dev

引用

import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-super-solution-module";
Quill.register("modules/ImageExtend", ImageExtend);

在data中return该参数

// 富文本框参数设置 
            // Rich text box parameter settings
            editorOption: {
                modules: {
                    ImageExtend: {
                      	// 可选参数 是否显示上传进度和提示语
                        loading: true,
                      	// 图片参数名
                        name: "img",
                      	// 可选参数 图片大小，单位为M，1M = 1024kb 
                        size: 1,
                      	// 服务器地址, 如果action为空，则采用base64插入图片 
                        action: "/uploads", 
                      	// 可选 可上传的图片格式 
                        accept: "image/jpg, image/png, image/gif, image/jpeg, image/bmp, image/x-icon", 
                        // response 为一个函数用来获取服务器返回的具体图片地址
                        response: (res) => {
                            return res.data.url;
                        },
                      	// 可选参数 设置请求头部 
                        headers: (xhr) => {
                            // 比如添加 csrf-token
                            xhr.setRequestHeader("X-CSRFToken", "TestToken");
                        }, 
                      	// 图片超过大小的回调 
                        sizeError: () => {
                           //  alert("图片大小超过 1 M");
                        }, 
                      	// 可选参数 自定义开始上传触发事件
                        start: () => {}, 
                      	// 可选参数 自定义上传结束触发的事件，无论成功或者失败
                        end: () => {},
                      	// 可选参数 上传失败触发的事件
                        error: () => {}, 
                      	// 可选参数  上传成功触发的事件
                        success: () => {}, 
                      	// 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
                        change: (xhr, formData) => {
                            formData.append("example", "test");
                        }, 
                    },
                    toolbar: {
                      	// container为工具栏，此次引入了全部工具栏，也可自行配置
                        container: container, 
                        handlers: {
                            image: function() {
                                // 劫持原来的图片点击按钮事件
                                QuillWatch.emit(this.quill.id);
                            },
                        },
                    },
                },
            },
        };