vue3+vite+Tinymce

Vue 3 和 Vite 是两个独立的工具，可以分别使用。Vue 3 是一种现代化的 JavaScript 框架，用于构建用户界面。Vite 是一个面向现代浏览器的构建工具，主要用于快速开发 Vue 应用。

如果你想在 Vue 3 中使用 Tinymce 富文本编辑器，你可以按照以下步骤进行：

1. 首先，在你的 Vue 3 项目中安装 Tinymce：

npm install tinymce

2. 在你的组件中导入和使用 Tinymce：

<template>
  <div>
    <textarea id="tinymce-editor" v-model="content"></textarea>
  </div>
</template>

<script>
import { createApp, ref } from 'vue';
import tinymce from 'tinymce/tinymce';

export default {
  setup() {
    const content = ref('');

    tinymce.init({
      selector: '#tinymce-editor',
      plugins: 'advlist autolink lists link image charmap print preview anchor',
      toolbar: 'undo redo | bold italic underline strikethrough | bullist numlist outdent indent | link image',
      height: 300,
      content_style: 'body { font-family: Arial }',
      setup: (editor) => {
        editor.on('init', () => {
          editor.setContent(content.value);
        });
        editor.on('change', () => {
          content.value = editor.getContent();
        });
      },
    });

    return {
      content,
    };
  },
};
</script>

这样，你就可以在 Vue 3 中使用 Tinymce 富文本编辑器了。记得在组件销毁时销毁 Tinymce 实例，以避免内存泄漏：

beforeUnmount() {
  tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'tinymce-editor');
}

希望这可以帮助到你！如果你有其他问题，请随时提问。