Editor组件优化，支持自定义高度&图片冲突问题

RuoYi
1 parent eb30fc4b
Showing 2 changed files with 90 additions and 121 deletions
ruoyi-ui/src/components/Editor/index.vue
ruoyi-ui/src/views/system/notice/index.vue
 <template>
-  <div>
-    <!-- 图片上传组件辅助 -->
-    <el-upload
-      class="avatar-uploader quill-img"
-      :action="uploadImgUrl"
-      name="file"
-      :headers="headers"
-      :show-file-list="false"
-      :on-success="quillImgSuccess"
-      :on-error="uploadError"
-      :before-upload="quillImgBefore"
-      accept='.jpg,.jpeg,.png,.gif'
-    ></el-upload>
-
-    <!-- 富文本组件 -->
-    <quill-editor
-      class="editor"
-      v-model="content"
-      ref="quillEditor"
-      :options="editorOption"
-      @blur="onEditorBlur($event)"
-      @focus="onEditorFocus($event)"
-      @change="onEditorChange($event)"
-    ></quill-editor>
-  </div>
+    <div class="editor" ref="editor" :style="styles"></div>
 </template>
  
 <script>
-import { getToken } from '@/utils/auth'
-
-// 工具栏配置
-const toolbarOptions = [
-  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
-  ["blockquote", "code-block"],                    // 引用  代码块
-  [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
-  [{ indent: "-1" }, { indent: "+1" }],            // 缩进
-  [{ size: ["small", false, "large", "huge"] }],   // 字体大小
-  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
-  [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
-  [{ align: [] }],                                 // 对齐方式
-  ["clean"],                                       // 清除文本格式
-  ["link", "image", "video"]                       // 链接、图片、视频
-];
-
-import { quillEditor } from "vue-quill-editor";
+import Quill from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
  
 export default {
+  name: "Editor",
   props: {
     /* 编辑器的内容 */
     value: {
-      type: String
+      type: String,
+      default: "",
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
     },
-    /* 图片大小 */
-    maxSize: {
+    /* 最小高度 */
+    minHeight: {
       type: Number,
-      default: 4000 //kb
-    }
+      default: null,
+    },
   },
-  components: { quillEditor },
   data() {
     return {
-      content: this.value,
-      uploadImgUrl: "",
-      editorOption: {
-        theme: "snow", // or 'bubble'
-        placeholder: "请输入内容",
+      Quill: null,
+      currentValue: "",
+      options: {
+        theme: "snow",
+        bounds: document.body,
+        debug: "warn",
         modules: {
-          toolbar: {
-            container: toolbarOptions,
-            handlers: {
-              image: function(value) {
-                if (value) {
-                  // 触发input框选择图片文件
-                  document.querySelector(".quill-img input").click();
-                } else {
-                  this.quill.format("image", false);
-                }
-              }
-            }
-          }
-        }
+          // 工具栏配置
+          toolbar: [
+            ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
+            ["blockquote", "code-block"],                    // 引用  代码块
+            [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
+            [{ indent: "-1" }, { indent: "+1" }],            // 缩进
+            [{ size: ["small", false, "large", "huge"] }],   // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
+            [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
+            [{ align: [] }],                                 // 对齐方式
+            ["clean"],                                       // 清除文本格式
+            ["link", "image", "video"]                       // 链接、图片、视频
+          ],
+        },
+        placeholder: "请输入内容",
+        readOnly: false,
       },
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: 'Bearer ' + getToken()
-      }
     };
   },
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
   watch: {
-    value: function() {
-      this.content = this.value;
-    }
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val;
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.value);
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.Quill = null;
   },
   methods: {
-    onEditorBlur() {
-      //失去焦点事件
-    },
-    onEditorFocus() {
-      //获得焦点事件
+    init() {
+      const editor = this.$refs.editor;
+      this.Quill = new Quill(editor, this.options);
+      this.Quill.pasteHTML(this.currentValue);
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = this.Quill.getText();
+        const quill = this.Quill;
+        this.currentValue = html;
+        this.$emit("input", html);
+        this.$emit("on-change", { html, text, quill });
+      });
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        this.$emit("on-text-change", delta, oldDelta, source);
+      });
+      this.Quill.on("selection-change", (range, oldRange, source) => {
+        this.$emit("on-selection-change", range, oldRange, source);
+      });
+      this.Quill.on("editor-change", (eventName, ...args) => {
+        this.$emit("on-editor-change", eventName, ...args);
+      });
     },
-    onEditorChange() {
-      //内容改变事件
-      this.$emit("input", this.content);
-    },
-
-    // 富文本图片上传前
-    quillImgBefore(file) {
-      let fileType = file.type;
-			if(fileType === 'image/jpeg' || fileType === 'image/png'){
-				return true;
-			}else {
-				this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
-				return false;
-			}
-    },
-
-    quillImgSuccess(res, file) {
-      // res为图片服务器返回的数据
-      // 获取富文本组件实例
-      let quill = this.$refs.quillEditor.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("图片插入失败");
-      }
-    },
-    // 富文本图片上传失败
-    uploadError() {
-      // loading动画消失
-      this.$message.error("图片插入失败");
-    }
-  }
+  },
 };
-</script> 
+</script>
  
 <style>
 .editor {
   white-space: pre-wrap!important;
   line-height: normal !important;
-  height: 192px;
 }
 .quill-img {
   display: none;
@@ -159,12 +159,12 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="内容">
-              <Editor v-model="form.noticeContent" />
+              <editor v-model="form.noticeContent" :min-height="192"/>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer" style="padding-top:30px">
+      <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>