From ccf05b697db8676056838cbd0633aeadf8e3810a Mon Sep 17 00:00:00 2001 From: hechieh <361020878@qq.com> Date: 星期六, 10 四月 2021 17:08:49 +0800 Subject: [PATCH] 富文本编辑器自定义上传地址 --- ruoyi-ui/src/components/Editor/index.vue | 40 ++++++++++++++++++++++++++++++++++++++++ 1 files changed, 40 insertions(+), 0 deletions(-) diff --git a/ruoyi-ui/src/components/Editor/index.vue b/ruoyi-ui/src/components/Editor/index.vue index ba2ea73..cc343cc 100644 --- a/ruoyi-ui/src/components/Editor/index.vue +++ b/ruoyi-ui/src/components/Editor/index.vue @@ -1,5 +1,20 @@ <template> + <div> + <el-upload + :action="uploadUrl" + :on-success="handleUploadSuccess" + :before-upload="handleBeforeUpload" + :on-error="handleUploadError" + name="file" + :show-file-list="false" + :headers="headers" + style="display: none;" + ref='upload' + v-if='this.uploadUrl' + > + </el-upload> <div class="editor" ref="editor" :style="styles"></div> + </div> </template> <script> @@ -30,6 +45,11 @@ readOnly: { type: Boolean, default: false, + }, + /* 上传地址 */ + uploadUrl: { + type: String, + default: '', } }, data() { @@ -95,6 +115,26 @@ 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'; + if (value) { + this.$refs.upload.$children[0].$refs.input.click(); + } else { + this.quill.format('image', false); + } + }); + 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.pasteHTML(this.currentValue); this.Quill.on("text-change", (delta, oldDelta, source) => { const html = this.$refs.editor.children[0].innerHTML; -- Gitblit v1.9.2