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