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