From c860c008756f12b01f2cc3cbe8713aca9518b969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 5 Mar 2022 15:04:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(WangEditor):=20=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E4=BF=9D=E5=AD=98=E5=92=8C=E5=9B=9E=E6=98=BE?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WangEditor/index.vue | 76 ++++++++++++++++++++---------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index a8d7d89d..f41a187a 100644
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -1,31 +1,57 @@
+<!--
+  author: haoxr
+  link: https://www.wangeditor.com/v5/guide/for-frame.html#vue3
+-->
 <template>
-  <div>
-    <div v-if="isEditorShow" style="border: 1px solid #ccc">
-      <Toolbar
-          :editorId="editorId"
-          :defaultConfig="toolbarConfig"
-          style="border-bottom: 1px solid #ccc"
-      />
-      <Editor
-          :editorId="editorId"
-          :defaultConfig="editorConfig"
-          style="height: 500px"
-      />
-    </div>
-    <p v-else>loading</p>
+  <div style="border: 1px solid #ccc">
+    <!-- 工具栏 -->
+    <Toolbar
+        :editorId="editorId"
+        :defaultConfig="toolbarConfig"
+        style="border-bottom: 1px solid #ccc"
+    />
+    <!-- 编辑器 -->
+    <Editor
+        :editorId="editorId"
+        :defaultConfig="editorConfig"
+        :defaultHtml="defaultHtml"
+        @onChange="handleChange"
+        style="height: 500px; overflow-y: hidden;"
+    />
   </div>
 </template>
 
 <script setup>
-import {onBeforeUnmount, reactive, ref, toRefs} from 'vue'
+import {computed, nextTick, onBeforeUnmount, onMounted, reactive, toRefs} from 'vue'
 import {Editor, Toolbar, getEditor, removeEditor} from '@wangeditor/editor-for-vue'
+import cloneDeep from 'lodash.clonedeep'
+
+// API 引用
 import {uploadFile} from "@/api/system/file";
 
-const state =reactive({
-  editorId : `w-e-${Math.random().toString().slice(-5)}`, //【注意】编辑器 id ，要全局唯一
-  toolbarConfig : {},
-  isEditorShow : true,
-  editorConfig : {
+const props = defineProps({
+  modelValue: {
+    type: [String],
+    default: ''
+  },
+})
+
+const emit = defineEmits(['update:modelValue']);
+
+const modelValue = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (val) => {
+    emit('update:modelValue', val)
+  }
+});
+
+
+const state = reactive({
+  editorId: `w-e-${Math.random().toString().slice(-5)}`, //【注意】编辑器 id ，要全局唯一
+  toolbarConfig: {},
+  editorConfig: {
     placeholder: '请输入内容...',
     MENU_CONF: {
       uploadImage: {
@@ -39,11 +65,17 @@ const state =reactive({
         }
       }
     }
-  }
+  },
+  defaultHtml: props.modelValue
 })
 
-const {isEditorShow,editorId,toolbarConfig,editorConfig}  =toRefs(state)
+const {editorId, toolbarConfig, editorConfig,defaultHtml} = toRefs(state)
 
+function handleChange(editor) {
+  modelValue.value = editor.getHtml()
+}
+
+// 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
   const editor = getEditor(state.editorId)
   if (editor == null) return