尾部导航

src/components/WangEditor/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :style="`border: 1px solid #ccc; width: ${width}px`">
+  <div
+    :style="`border: 1px solid #ccc; width: ${width}px`"
+    :class="{
+      disabled: readOnly,
+    }"
+  >
     <Toolbar
       style="border-bottom: 1px solid #ccc"
       :editor="editorRef"
@@ -7,12 +12,14 @@
       :mode="mode"
     />
     <Editor
-      :style="`min-height: ${minHeight}px; height: ${height}px; overflow-y: hidden`"
+      :style="`min-height: ${minHeight}px; height: ${height}px;
+    overflow-y: hidden`"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       :mode="mode"
       @onCreated="handleCreated"
       @onChange="handleChange"
+      @onBlur="emitBlur"
     />
   </div>
 </template>
@@ -20,16 +27,37 @@
 <script>
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import { getToken } from "@/utils/auth";
-import { onBeforeUnmount, ref, shallowRef, onMounted, toRefs } from "vue";
+import {
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  onMounted,
+  toRefs,
+  nextTick,
+  watch,
+  computed,
+  // readonly,
+} from "vue";
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
 export default {
   components: { Editor, Toolbar },
+  // expose: {
+  //   isEmpty,
+  // },
   props: {
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
     modelValue: {
       type: String,
       default: "",
     },
+    placeholder: {
+      type: String,
+      default: "请输入内容",
+    },
     minHeight: {
       type: [String, Number],
       default: 300,
@@ -50,6 +78,9 @@ export default {
   setup(props, context) {
     // 编辑器实例，必须用 shallowRef
     const editorRef = shallowRef();
+    // editorRef.value.on("blur", () => {
+    //   console.log("blur");
+    // });
 
     // 内容 HTML
     const valueHtml = ref("");
@@ -61,11 +92,16 @@ export default {
       { immediate: true }
     );
     const { height } = toRefs(props);
+
     const toolbarConfig = {
       excludeKeys: [],
     };
+    // onBlur: (editor) => {
+    //   console.log("onBlur");
+    // },
     const editorConfig = {
-      placeholder: "请输入内容...",
+      placeholder: props.placeholder,
+      readOnly: props.readOnly,
       MENU_CONF: {
         uploadImage: {
           server: `${baseUrl}/common/upload`,
@@ -84,7 +120,10 @@ export default {
       },
     };
 
-    // console.log(editor.getMenuConfig('uploadImage'));
+    const isEmpty = () => {
+      return editorRef.value.isEmpty();
+    };
+
     // 组件销毁时，也及时销毁编辑器
     onBeforeUnmount(() => {
       const editor = editorRef.value;
@@ -96,8 +135,19 @@ export default {
       editorRef.value = editor; // 记录 editor 实例，重要！
     };
     const handleChange = (editor) => {
-      context.emit("update:modelValue", editor.getHtml());
+      if (editor.isEmpty()) {
+        context.emit("update:modelValue", "");
+      } else {
+        context.emit("update:modelValue", editor.getHtml());
+      }
     };
+    context.expose({ isEmpty });
+
+    const emitBlur = () => {
+      context.emit("blur", editorRef.value);
+      // editorRef.value.emit("blur");
+    };
+
     return {
       editorRef,
       valueHtml,
@@ -107,7 +157,25 @@ export default {
       height,
       handleCreated,
       handleChange,
+      // isEmpty,
+      emitBlur,
     };
   },
 };
 </script>
+<style lang="scss" scoped>
+.disabled {
+  background-color: #f5f7fa;
+  cursor: not-allowed;
+  :deep(.w-e-text-container) {
+    background-color: inherit;
+    // color: green;
+    opacity: 0.5;
+  }
+  :deep(.w-e-toolbar) {
+    user-select: none;
+    pointer-events: none;
+    background-color: inherit;
+  }
+}
+</style>