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

0.强调要安装的依赖的版本

"quill": "^1.3.6",
"quill-image-extend-module": "^1.1.2",
"vue-quill-editor": "^3.0.6",

注意修改vue.config.js

var webpack = require('webpack');
module.exports = {
  configureWebpack: {
    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  },

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

如果你image-paste.min.js没有的 话，可以新建一个js,里面的内容粘贴下面的

/* eslint-disable */
/* global define */
!function (e, t) {
    "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.ImagePaste = t() : e.ImagePaste = t()
}(this, function () {
    return function (e) {
        function t(i) {
            if (n[i]) return n[i].exports;
            var o = n[i] = {i: i, l: !1, exports: {}};
            return e[i].call(o.exports, o, o.exports, t), o.l = !0, o.exports
        }

        var n = {};
        return t.m = e, t.c = n, t.i = function (e) {
            return e
        }, t.d = function (e, n, i) {
            t.o(e, n) || Object.defineProperty(e, n, {configurable: !1, enumerable: !0, get: i})
        }, t.n = function (e) {
            var n = e && e.__esModule ? function () {
                return e.default
            } : function () {
                return e
            };
            return t.d(n, "a", n), n
        }, t.o = function (e, t) {
            return Object.prototype.hasOwnProperty.call(e, t)
        }, t.p = "", t(t.s = 0)
    }([function (e, t, n) {
        "use strict";

        function i(e, t) {
            if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
        }

        Object.defineProperty(t, "__esModule", {value: !0}), n.d(t, "ImagePaste", function () {
            return o
        });
        var o = function e(t) {
            var n = this, o = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
            i(this, e), this.handlePaste = function (e) {
                var t = e.clipboardData, i = void 0, o = void 0, r = void 0;
                if (t && (i = t.items)) {
                    o = i[0], r = t.types || [];
                    for (var a = 0; a < r.length; a++) if ("Files" === r[a]) {
                        o = i[a];
                        break
                    }
                    if (o && "file" === o.kind && o.type.match(/^image\//i)) {
                        e.preventDefault();
                        var s = o.getAsFile(), u = n.config.addImageBlob;
                        u && "[object Function]" === {}.toString.call(u) ? u(s, n.insertImg) : n.toBase64(s)
                    }
                }
            }, this.toBase64 = function (e) {
                var t = new FileReader;
                t.onload = function (e) {
                    n.insertImg(e.target.result)
                }, t.readAsDataURL(e)
            }, this.insertImg = function (e) {
                var t = (n.quill.getSelection() || {}).index || n.quill.getLength() - 1;
                n.quill.insertEmbed(t, "image", e, "user"), setTimeout(function () {
                    n.quill.setSelection(t + 1)
                }, 0)
            }, this.quill = t, this.config = o, t.root.addEventListener("paste", this.handlePaste, !1)
        };

        window.Quill && window.Quill.register("modules/imagePaste", o)
    }])
});

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('请输入案例详情');
                }