关于前端:vuequilleditor-富文本上传图片到七牛

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