vue里结合QuillEditor写富文本编辑器-含图片粘贴上传服务器

1.页面中

  <el-form-item label="详情" :label-width="formLabelWidth">
                        <quill-editor ref="myQuillEditor" v-model="sampleForm.content"  :options="editorOption" />
                    </el-form-item>

2.script部分

 import {quillEditor, Quill} from 'vue-quill-editor'
    import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    Quill.register('modules/ImageExtend', ImageExtend)

 import '../api/image-paste.min.js';
    import axios from 'axios';

export default {
        name: "SampleList",
        components: {quillEditor},

3.data部分

 editorOption: {
                    modules: {

                        /* 还有一些其他的模块*/
                        imagePaste: {
                            addImageBlob: function (blob, callback) {
                                var formData = new FormData()
                                formData.append('file', blob)
                                // your upload function, get the uploaded image url, add then
                                let config = {
                                    headers: {
                                        "Content-Type":"multipart/form-data",
                                        "Accept": "*/*"
                                    }

                                }
                                // 上传接口
                                axios.post(CON_ACTION,formData,config).then(res => {
                                        console.log(res);
                                        var imgUrl = res.data.obj // 服务器返回的图片url
                                        callback(BASE_URL+imgUrl)

                                    })
                            }
                        },

                        ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
                            loading: true,//可选参数 是否显示上传进度和提示语
                            name: 'file', // 图片参数名
                            size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
                            action: CON_ACTION, // 服务器地址, 如果action为空，则采用base64插入图片
                            // response 为一个函数用来获取服务器返回的具体图片地址
                            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
                            // 则 return res.data.url
                            response: res => {
                                return BASE_URL+res.obj;
                            },
                            headers: xhr => {
                                // 上传图片请求需要携带token的 在xhr.setRequestHeader中设置
                                // xhr.setRequestHeader(
                                //     "Authorization",
                                //     this.getCookie("username")
                                //     ? this.getCookie("username").token_type +
                                //         this.getCookie("username").access_token
                                //     : "Basic emh4eTp6aHh5"
                                // );
                            }, // 可选参数 设置请求头部
                            sizeError: () => {}, // 图片超过大小的回调
                            start: () => {}, // 可选参数 自定义开始上传触发事件
                            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                            error: () => {}, // 可选参数 上传失败触发的事件
                            success: () => {}, // 可选参数  上传成功触发的事件
                            change: (xhr, formData) => {
                                // xhr.setRequestHeader('myHeader','myValue')
                                // formData.append('token', 'myToken')
                            } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
                        },
                        toolbar:{

                            container: container,
                            handlers: {
                                'image': function () {
                                    QuillWatch.emit(this.quill.id)
                                }
                            }

                        }
                    },
                    //主题
                    theme: "snow",
                    placeholder: "请输入正文"

                },

4.提交表单的验证部分

 if(this.$refs.myQuillEditor.value == ''  ){
                    return this.$message.error('请输入案例详情');
                }