From 1093ec3e6e4fe1f49b7458c29e518744fe56532f Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Mon, 9 Nov 2020 22:51:27 +0800
Subject: [PATCH] fix(tinymce): fixed multiple editors showing only one (#83)

---
 CHANGELOG.zh_CN.md                       |  6 ++++++
 build/vite/plugin/dynamicImport/index.ts |  1 -
 src/components/Tinymce/src/Editor.vue    | 16 +++++++++-------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 6a6f23c83..746ef5da6 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,9 @@
+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复多个富文本编辑器只显示一个
+
 ## 2.0.0-rc.9 (2020-11-9)
 
 ### ✨ Features
diff --git a/build/vite/plugin/dynamicImport/index.ts b/build/vite/plugin/dynamicImport/index.ts
index c8b2e5eea..6be898291 100644
--- a/build/vite/plugin/dynamicImport/index.ts
+++ b/build/vite/plugin/dynamicImport/index.ts
@@ -34,7 +34,6 @@ const dynamicImportTransform = function (env: any = {}): Transform {
         export default function (id) {
            switch (id) {
           ${files
-
             .map((p) =>
               `   case '${getPath(p)}': return  () => import('${p
                 .replace('src/views', '/@/views')
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index ae74d4650..b33fb223a 100644
--- a/src/components/Tinymce/src/Editor.vue
+++ b/src/components/Tinymce/src/Editor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tinymce-container" :style="{ width: containerWidth }">
-    <textarea :id="tinymceId" ref="elRef"></textarea>
+    <textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea>
   </div>
 </template>
 
@@ -15,7 +15,6 @@
     watch,
     onUnmounted,
     onDeactivated,
-    watchEffect,
   } from 'vue';
   import { basicProps } from './props';
   import toolbar from './toolbar';
@@ -36,12 +35,9 @@
     emits: ['change', 'update:modelValue'],
     setup(props, { emit, attrs }) {
       const editorRef = ref<any>(null);
+      const tinymceId = ref<string>(snowUuid('tiny-vue'));
       const elRef = ref<Nullable<HTMLElement>>(null);
 
-      const tinymceId = computed(() => {
-        return snowUuid('tiny-vue');
-      });
-
       const tinymceContent = computed(() => {
         return props.modelValue;
       });
@@ -118,12 +114,18 @@
 
       function init() {
         toPromise().then(() => {
-          initEditor();
+          setTimeout(() => {
+            initEditor();
+          }, 0);
         });
       }
 
       function initEditor() {
         getTinymce().PluginManager.add('lineHeight', lineHeight(getTinymce()));
+        const el = unref(elRef);
+        if (el) {
+          el.style.visibility = '';
+        }
         getTinymce().init(unref(initOptions));
       }