富文本粘贴图片上传到服务器

src/components/quill/index.vue

@@ -139,39 +139,66 @@ export default {
         this.Quill = null;
     },
     methods: {
-        init() {
+        init () {
             const editor = this.$refs.editor;
             // 初始化编辑器
             this.Quill = new Quill(editor, this.options);
+            const ins = this.Quill
             // 默认值
-            this.Quill.pasteHTML(this.currentValue);
-            if (this.toTop) {
+            ins.pasteHTML(this.currentValue);
+            if(this.toTop){
                 this.$nextTick(() => {
-                    window.scrollTo(0, 0);
-                });
+                    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;
                 // 发出事件 v-model
-                this.$emit("input", html);
+                this.$emit('input', html);
                 // 发出事件
-                this.$emit("on-change", { html, text, quill });
+                this.$emit('on-change', { html, text, quill });
             });
             // 将一些 quill 自带的事件传递出去
-            this.Quill.on("text-change", (delta, oldDelta, source) => {
-                this.$emit("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) => {
-                this.$emit("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) => {
-                this.$emit("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;