perf: Editor component support v-model

package.json

@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.2.1",
-    "@vueuse/core": "^8.2.5",
+    "@vueuse/core": "^8.2.6",
     "@wangeditor/editor": "^5.0.0",
-    "@wangeditor/editor-for-vue": "^5.1.8-7",
+    "@wangeditor/editor-for-vue": "^5.1.10",
     "@zxcvbn-ts/core": "^2.0.1",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
@@ -45,7 +45,7 @@
     "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.0",
     "qs": "^6.10.3",
-    "vue": "3.2.32",
+    "vue": "3.2.33",
     "vue-i18n": "9.1.9",
     "vue-router": "^4.0.14",
     "vue-types": "^4.1.1",
@@ -54,12 +54,12 @@
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.28",
+    "@iconify/json": "^2.1.29",
     "@intlify/vite-plugin-vue-i18n": "^3.4.0",
     "@purge-icons/generated": "^0.8.1",
     "@types/intro.js": "^3.0.2",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.24",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
@@ -75,14 +75,14 @@
     "eslint-plugin-vue": "^8.6.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
-    "lint-staged": "^12.3.7",
+    "lint-staged": "^12.3.8",
     "plop": "^3.0.5",
     "postcss": "^8.4.12",
-    "postcss-html": "^1.3.1",
+    "postcss-html": "^1.4.1",
     "postcss-less": "^6.0.0",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
-    "stylelint": "^14.6.1",
+    "stylelint": "^14.7.1",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
@@ -90,7 +90,7 @@
     "stylelint-order": "^5.0.0",
     "typescript": "4.6.3",
     "unplugin-vue-define-options": "^0.6.0",
-    "vite": "2.9.4",
+    "vite": "2.9.5",
     "vite-plugin-eslint": "^1.4.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
@@ -98,7 +98,7 @@
     "vite-plugin-style-import": "^1.4.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.4",
-    "vue-tsc": "^0.34.6",
+    "vue-tsc": "^0.34.7",
     "windicss": "^3.5.1",
     "windicss-analysis": "^0.3.5"
   },

src/components/Editor/src/Editor.vue

@@ -20,18 +20,39 @@ const props = defineProps({
     type: Object as PropType<IEditorConfig>,
     default: () => undefined
   },
-  defaultHtml: propTypes.string.def('')
+  modelValue: propTypes.string.def('')
 })
 
+const emit = defineEmits(['change', 'update:modelValue'])
+
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef<IDomEditor>()
 
+const valueHtml = ref('')
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueHtml)) return
+    valueHtml.value = val
+  },
+  {
+    immediate: true
+  }
+)
+
+// 监听
+watch(
+  () => valueHtml.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+
 const handleCreated = (editor: IDomEditor) => {
   editorRef.value = editor
 }
 
-const emit = defineEmits(['change'])
-
 // 编辑器配置
 const editorConfig = computed((): IEditorConfig => {
   return Object.assign(
@@ -92,22 +113,10 @@ const getEditorRef = async (): Promise<IDomEditor> => {
 defineExpose({
   getEditorRef
 })
-
-const show = ref(true)
-
-watch(
-  () => props.defaultHtml,
-  () => {
-    show.value = false
-    setTimeout(() => {
-      show.value = true
-    }, 0)
-  }
-)
 </script>
 
 <template>
-  <div v-if="show" class="border-1 border-solid border-[var(--tags-view-border-color)]">
+  <div class="border-1 border-solid border-[var(--tags-view-border-color)]">
     <!-- 工具栏 -->
     <Toolbar
       :editor="editorRef"
@@ -116,12 +125,12 @@ watch(
     />
     <!-- 编辑器 -->
     <Editor
+      v-model="valueHtml"
       :editorId="editorId"
       :defaultConfig="editorConfig"
-      :defaultHtml="defaultHtml"
       :style="editorStyle"
       @on-change="handleChange"
-      @onCreated="handleCreated"
+      @on-created="handleCreated"
     />
   </div>
 </template>

src/views/Components/Editor/Editor.vue

@@ -27,6 +27,6 @@ setTimeout(() => {
 
 <template>
   <ContentWrap :title="t('richText.richText')" :message="t('richText.richTextDes')">
-    <Editor ref="editorRef" @change="change" :defaultHtml="defaultHtml" />
+    <Editor v-model="defaultHtml" ref="editorRef" @change="change" />
   </ContentWrap>
 </template>