From 90ef9856a0885fa812339cb7047ecc98b86c7b73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Thu, 14 Apr 2022 08:58:02 +0800
Subject: [PATCH] fix: fix the error reported by the Editor component

---
 .vscode/settings.json                |  2 +-
 src/components/Editor/src/Editor.vue | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4fde8c5..2bbdc0f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,7 +5,7 @@
     "source.fixAll.eslint": true
   },
   "[vue]": {
-    "editor.defaultFormatter": "johnsoncodehk.volar"
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   },
   "i18n-ally.localesPaths": ["src/locales"],
   "i18n-ally.keystyle": "nested",
diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue
index 1a1c46a..b2a8d13 100644
--- a/src/components/Editor/src/Editor.vue
+++ b/src/components/Editor/src/Editor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch } from 'vue'
-import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
+import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { IDomEditor, IEditorConfig, i18nChangeLanguage } from '@wangeditor/editor'
 import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
@@ -23,6 +23,13 @@ const props = defineProps({
   defaultHtml: propTypes.string.def('')
 })
 
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef<IDomEditor>()
+
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor
+}
+
 const emit = defineEmits(['change'])
 
 // 编辑器配置
@@ -70,17 +77,16 @@ const handleChange = (editor: IDomEditor) => {
 
 // 组件销毁时，及时销毁编辑器
 onBeforeUnmount(() => {
-  const editor = getEditor(props.editorId)
+  const editor = unref(editorRef.value)
   if (editor == null) return
 
   // 销毁，并移除 editor
   editor.destroy()
-  removeEditor(props.editorId)
 })
 
 const getEditorRef = async (): Promise<IDomEditor> => {
   await nextTick()
-  return getEditor(props.editorId) as IDomEditor
+  return unref(editorRef.value) as IDomEditor
 }
 
 defineExpose({
@@ -109,11 +115,13 @@ watch(
     />
     <!-- 编辑器 -->
     <Editor
+      :editor="editorRef"
       :editorId="editorId"
       :defaultConfig="editorConfig"
       :defaultHtml="defaultHtml"
       :style="editorStyle"
       @on-change="handleChange"
+      @onCreated="handleCreated"
     />
   </div>
 </template>