在做项目时候用到富文本编辑器，使用的是vue项目，且vue-quill-editor比较流行，遂选他。

正常使用的话其图片点击上传时候是直接以base64图片保存，但这就导致很大的图片文件，通常后端有容量限制就无法保存，或者即使能保存在编辑时候返回数据特别缓慢造成用户很差的体验。

经过网上广大网友集思广益，最终决定借助el-uoload组件，当点击富文本编辑器的图片上传组件时候，获取到el-upload组件，并调用upload的click点击事件，从而调用图片上传接口地址，把图片保存到服务器中，让后端以url形式返回，前端进行渲染，这样可大幅度降低图片大小，完美解决渲染缓慢问题，也节省了空间，提高用户体验。

代码展示如下：

 <quill-editor style="height:300px; margin-bottom:80px" v-model="dataNews.content" ref="myQuillEditor" :options="editorOption" />
 <el-upload :data="objectPic" class="avatar-uploader1" :file-list=[] :action="uploadUrl"
    :shrow-file-list='false' :on-success="uploadSuccess" />

import { quillEditor } from "vue-quill-editor"
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }], // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
    [{ 'align': [] }],
    ['link', 'image','video'],
    ['clean'] // remove formatting button
];

export default {
    data() {
        return {
            uploadUrl: '/api/blade-resource/oss/endpoint/put-file',
            // 富文本编辑器配置
            editorOption: {
                placeholder: "请输入内容",
                theme: 'snow', // or 'bubble'
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.avatar-uploader1 input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
        }
    }
}

   uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill;
            // 如果上传成功
            if (res.code === 200) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, 'image', res.data.link)
                // 调整光标到最后
                quill.setSelection(length + 1)
                this.$forceupdate() 
            } else {
                this.$message.error('图片插入失败')
            }
            // loading动画消失
            this.quillUpdateImg = false;
        },