vue3中销毁tinymce

在 Vue3 中销毁 TinyMCE 编辑器可以通过以下步骤实现：

1. 在需要销毁 TinyMCE 编辑器的组件中，先定义一个变量来存储 TinyMCE 实例：

import { onMounted, onUnmounted, ref } from 'vue';
import tinymce from 'tinymce/tinymce';

export default {
  setup() {
    let editor = null; // 存储 TinyMCE 实例的变量

    // 初始化 TinyMCE 编辑器
    onMounted(() => {
      tinymce.init({
        selector: '#my-editor',
        plugins: 'link image code',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
        height: 500,
        setup: (editor) => {
          // 将 TinyMCE 实例赋值给变量
          console.log('Editor was initialized', editor);
          editor.on('init', () => {
            console.log('Editor is ready');
            editor.setContent('Hello World!');
          });
          editor.on('change', () => {
            console.log('Content changed:', editor.getContent());
          });
          editor.on('blur', () => {
            console.log('Editor lost focus');
          });
          editor.on('focus', () => {
            console.log('Editor got focus');
          });
          editor.on('keydown', (event) => {
            console.log('Key down event:', event);
          });
        },
      }).then((value) => {
        editor = value;
      });
    });

    // 销毁 TinyMCE 编辑器
    onUnmounted(() => {
      if (editor) {
        editor.destroy();
      }
    });

    return {
      editor,
    };
  },
};

2. 在组件的 `onUnmounted` 钩子函数中，调用 `editor.destroy()` 方法销毁 TinyMCE 实例。

这样，在组件销毁时就能正确地销毁 TinyMCE 编辑器，避免内存泄漏问题。