From a7feb9279fb5c482e2111a4124326c0d5552971c Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 15 Feb 2022 20:32:31 +0800 Subject: [PATCH] =?UTF-8?q?v3.5.0=20=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Editor/index.vue | 51 +++++++++++++------ 更新日志.md | 3 +- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/yudao-ui-admin/src/components/Editor/index.vue b/yudao-ui-admin/src/components/Editor/index.vue index 2bf95689a..640049ca0 100644 --- a/yudao-ui-admin/src/components/Editor/index.vue +++ b/yudao-ui-admin/src/components/Editor/index.vue @@ -3,14 +3,13 @@
@@ -22,6 +21,7 @@ import Quill from "quill"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; +import { getToken } from "@/utils/auth"; export default { name: "Editor", @@ -49,11 +49,14 @@ export default { /* 上传地址 */ uploadUrl: { type: String, - default: '', + default: "", } }, data() { return { + headers: { + Authorization: "Bearer " + getToken() + }, Quill: null, currentValue: "", options: { @@ -72,7 +75,7 @@ export default { [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ align: [] }], // 对齐方式 ["clean"], // 清除文本格式 - ["link", "image", "video"] // 链接、图片、视频 + ["link", "image"] // 链接、图片 ], }, placeholder: "请输入内容", @@ -115,23 +118,23 @@ export default { init() { const editor = this.$refs.editor; this.Quill = new Quill(editor, this.options); - // 如果设置了上传地址则自定义图片和视频的上传事件 + // 如果设置了上传地址则自定义图片上传事件 if (this.uploadUrl) { - let toolbar = this.Quill.getModule('toolbar'); - toolbar.addHandler('image', (value) => { - this.uploadType = 'image'; + let toolbar = this.Quill.getModule("toolbar"); + toolbar.addHandler("image", (value) => { + this.uploadType = "image"; if (value) { this.$refs.upload.$children[0].$refs.input.click(); } else { - this.quill.format('image', false); + this.quill.format("image", false); } }); - toolbar.addHandler('video', (value) => { - this.uploadType = 'video'; + toolbar.addHandler("video", (value) => { + this.uploadType = "video"; if (value) { this.$refs.upload.$children[0].$refs.input.click(); } else { - this.quill.format('video', false); + this.quill.format("video", false); } }); } @@ -154,13 +157,31 @@ export default { this.$emit("on-editor-change", eventName, ...args); }); }, + handleUploadSuccess(res, file) { + // 获取富文本组件实例 + let quill = this.Quill; + // 如果上传成功 + if (res.code == 200) { + // 获取光标所在位置 + let length = quill.getSelection().index; + // 插入图片 res.url为服务器返回的图片地址 + quill.insertEmbed(length, "image", res.url); + // 调整光标到最后 + quill.setSelection(length + 1); + } else { + this.$message.error("图片插入失败"); + } + }, + handleUploadError() { + this.$message.error("图片插入失败"); + }, }, };