富文本编辑器粘贴图片改成上传到服务器

src/components/quill/index.vue

@@ -139,17 +139,18 @@
                 const editor = this.$refs.editor;
                 // 初始化编辑器
                 this.Quill = new Quill(editor, this.options);
+                const ins = this.Quill
                 // 默认值
-                this.Quill.pasteHTML(this.currentValue);
+                ins.pasteHTML(this.currentValue);
                 if(this.toTop){
                     this.$nextTick(() => {
                         window.scrollTo(0,0)
                     })
                 }
                 // 绑定事件
-                this.Quill.on('text-change', (delta, oldDelta, source) => {
+                ins.on('text-change', (delta, oldDelta, source) => {
                     const html = this.$refs.editor.children[0].innerHTML;
-                    const text = this.Quill.getText();
+                    const text = ins.getText();
                     const quill = this.Quill;
                     // 更新内部的值
                     this.currentValue = html;
@@ -159,15 +160,41 @@
                     this.$emit('on-change', { html, text, quill });
                 });
                 // 将一些 quill 自带的事件传递出去
-                this.Quill.on('text-change', (delta, oldDelta, source) => {
+                ins.on('text-change', (delta, oldDelta, source) => {
                     this.$emit('on-text-change', delta, oldDelta, source);
                 });
-                this.Quill.on('selection-change', (range, oldRange, source) => {
+                ins.on('selection-change', (range, oldRange, source) => {
                     this.$emit('on-selection-change', range, oldRange, source);
                 });
-                this.Quill.on('editor-change', (eventName, ...args) => {
+                ins.on('editor-change', (eventName, ...args) => {
                     this.$emit('on-editor-change', eventName, ...args);
                 });
+                // 监听粘贴事件
+                ins.root.addEventListener('paste', evt => {
+                    if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
+                        evt.preventDefault();
+                        // 检测是否粘贴的是图片
+                        [].forEach.call(evt.clipboardData.files, file => {
+                            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+                                return
+                            }
+                            const param = new FormData()
+                            param.append('file', file)
+                            // 把图片上传到服务器，不然会直接把base64存到数据库
+                            this.$post(this.api.fileupload, param, {
+                                headers: { "Content-Type": "multipart/form-data" }
+                            }).then(res => {
+                                var range = ins.getSelection()
+                                if (range) {
+                                    //  在当前光标位置插入图片
+                                    ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
+                                    //  将光标移动到图片后面
+                                    ins.setSelection(range.index + 1)
+                                }
+                            }).catch(res => {})
+                        });
+                    }
+                }, false)
             },
             beforeUpload(file){
                 this.loading = true