vue3 tinymce6 ts

Vue 3 + TinyMCE 6 + TypeScript 的组合可以用于在 Vue 3 项目中集成 TinyMCE 6 富文本编辑器，并使用 TypeScript 进行开发。以下是一些基本步骤：

1. 安装依赖：
在项目根目录下运行以下命令安装所需的依赖：

   npm install tinymce@^6.0.0 vue@^3.0.0
   npm install @types/tinymce

2. 创建一个 Vue 组件，用于包含 TinyMCE 编辑器：

   <template>
     <div>
       <textarea ref="editor"></textarea>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent, onMounted, ref } from 'vue';

   export default defineComponent({
     name: 'EditorComponent',
     setup() {
       const editorRef = ref<any>(null);

       onMounted(() => {
         tinymce.init({
           target: editorRef.value,
           plugins: 'advlist autolink lists link image charmap print preview anchor',
           toolbar: 'undo redo | formatselect | bold italic backcolor | \
                     alignleft aligncenter alignright alignjustify | \
                     bullist numlist outdent indent | removeformat | help'
         });
       });

       return {
         editorRef
       };
     }
   });
   </script>

3. 在需要使用编辑器的地方引入并使用该组件：

   <template>
     <div>
       <editor-component></editor-component>
     </div>
   </template>

   <script lang="ts">
   import { defineComponent } from 'vue';
   import EditorComponent from './EditorComponent.vue';

   export default defineComponent({
     name: 'App',
     components: {
       EditorComponent
     }
   });
   </script>

这样，你就可以在 Vue 3 项目中使用 TinyMCE 6 富文本编辑器，并且使用 TypeScript 进行开发了。记得在需要使用编辑器的组件中引入 `EditorComponent` 组件，并在模板中使用 `<editor-component></editor-component>` 标签。