援用https://blog.csdn.net/weixin_42080056/article/details/98774354

1.装置vue-quill-editor
npm i vue-quill-editor
2.引入
import { quillEditor } from 'vue-quill-editor'

3.vue增加组件，暗藏element-ui的el-upload

<el-upload        v-show="false"        class="avatar-uploader"        action="七牛上传门路"        :data='fileUpload'        :show-file-list="false"        :on-success="uploadSuccess"        :before-upload="beforeUpload"></el-upload><quill-editor        ref="myQuillEditor"        v-model="content"        :options="editorOption"></quill-editor>

4.data

fileUpload:{    token:'',    key:''},content: '',editorOption: {    placeholder: '请输出内容',    theme: 'snow',    modules: {        toolbar: {            container: [                ['bold', 'italic', 'underline', 'strike'],                ['blockquote', 'code-block'],                [{'header': 1}, {'header': 2}],                [{'list': 'ordered'}, {'list': 'bullet'}],                [{'script': 'sub'}, {'script': 'super'}],                [{'indent': '-1'}, {'indent': '+1'}],                [{'direction': 'rtl'}],                [{'size': ['small', false, 'large', 'huge']}],                [{'header': [1, 2, 3, 4, 5, 6, false]}],                [{'color': []}, {'background': []}],                [{'font': []}],                [{'align': []}],                ['link', 'image', 'video'],                ['clean']],            handlers: {                'image': function (value) {                    if (value) {                        document.querySelector('.avatar-uploader input').click()                    } else {                        this.quill.format('image', false);                    }                }            }        }    }},imgUrl:'',

5.重点是上传胜利后的办法uploadSuccess，调用el-upload的上传性能，返回门路拼接图片插入富文本

uploadSuccess(res, file){    this.imgUrl = '七牛资源门路'+file.name    // 首先获取富文本编辑器的实例    let quill = this.$refs.myQuillEditor.quill    // 上传胜利所执行    if (res) {        // 获取光标所在位置        let length = quill.getSelection().index;        // 插入图片res为服务器返回的数据        quill.insertEmbed(length, 'image', this.imgUrl)        // 光标挪动至文本末端        quill.setSelection(length + 1)    } else {        this.$message.error('图片插入失败')    }},beforeUpload(file){    this.fileUpload.key = file.name},