vue-quill-editor 富文本上传图片到七牛

引用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

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
},