fix(tinymce): fixed tinymce destory method

修复tinymce销毁方法可能出现异常的问题
vbenjs · Aug 19, 2021 · fb43fad · fb43fad
1 parent 8e01377
commit fb43fad
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-  import type { RawEditorSettings } from 'tinymce';
+  import type { Editor, RawEditorSettings } from 'tinymce';
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
   import 'tinymce/icons/default/icons';
@@ -60,8 +60,8 @@
     ref,
     unref,
     watch,
-    onUnmounted,
     onDeactivated,
+    onBeforeUnmount,
   } from 'vue';
   import ImgUpload from './ImgUpload.vue';
   import { toolbar, plugins } from './tinymce';
@@ -114,9 +114,9 @@
     components: { ImgUpload },
     inheritAttrs: false,
     props: tinymceProps,
-    emits: ['change', 'update:modelValue'],
+    emits: ['change', 'update:modelValue', 'inited', 'init-error'],
     setup(props, { emit, attrs }) {
-      const editorRef = ref();
+      const editorRef = ref<Nullable<Editor>>(null);
       const fullscreen = ref(false);
       const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
       const elRef = ref<Nullable<HTMLElement>>(null);
@@ -165,7 +165,7 @@
           content_css:
             publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
           ...options,
-          setup: (editor) => {
+          setup: (editor: Editor) => {
             editorRef.value = editor;
             editor.on('init', (e) => initSetup(e));
           },
@@ -194,9 +194,7 @@
       );
 
       onMountedOrActivated(() => {
-        if (initOptions.value.inline) {
-          tinymceId.value = unref(initOptions).selector!;
-        } else {
+        if (!initOptions.value.inline) {
           tinymceId.value = buildShortUUID('tiny-vue');
         }
         nextTick(() => {
@@ -206,7 +204,7 @@
         });
       });
 
-      onUnmounted(() => {
+      onBeforeUnmount(() => {
         destory();
       });
 
@@ -216,7 +214,7 @@
 
       function destory() {
         if (tinymce !== null) {
-          tinymce?.remove?.(tinymceId.value as string);
+          tinymce?.remove?.(unref(initOptions).selector!);
         }
       }
 
@@ -225,7 +223,14 @@
         if (el) {
           el.style.visibility = '';
         }
-        tinymce.init(unref(initOptions));
+        tinymce
+          .init(unref(initOptions))
+          .then((editor) => {
+            emit('inited', editor);
+          })
+          .catch((err) => {
+            emit('init-error', err);
+          });
       }
 
       function initSetup(e) {