From 603bb97288b13a767d62feaf504917a23fe95eca Mon Sep 17 00:00:00 2001
From: "jialong.yu" <Yujialong.123>
Date: Tue, 25 Jan 2022 14:54:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E7=B2=98=E8=B4=B4=E5=9B=BE=E7=89=87=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=88=B0=E6=9C=8D=E5=8A=A1=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/quill/index.vue | 39 ++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/quill/index.vue b/src/components/quill/index.vue
index 5e5b2a4..ad02ce0 100644
--- a/src/components/quill/index.vue
+++ b/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