vue3项目中使用tinyMce

在Vue 3项目中使用TinyMCE，你可以按照以下步骤进行操作：

1. 安装TinyMCE：在终端中运行以下命令来安装TinyMCE的npm包：

   npm install tinymce

2. 创建一个TinyMCE组件：在Vue项目中创建一个新的组件，比如`TinyMCE.vue`。

3. 在TinyMCE.vue组件中引入和初始化TinyMCE编辑器：

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

   <script>
   import { ref, onMounted } from 'vue';
   import 'tinymce/tinymce';
   import 'tinymce/icons/default';
   import 'tinymce/themes/silver';
   import 'tinymce/plugins/link';
   import 'tinymce/plugins/paste';

   export default {
     name: 'TinyMCE',
     setup() {
       const editorRef = ref(null);

       onMounted(() => {
         tinymce.init({
           target: editorRef.value,
           plugins: ['link', 'paste'],
           toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
           height: 500,
           // 其他配置...
         });
       });

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

在上面的代码中，我们引入了TinyMCE的必要资源，并在`onMounted`钩子函数中初始化了编辑器。

4. 在需要使用TinyMCE的页面中引入该组件：

   <template>
     <div>
       <h1>使用TinyMCE的页面</h1>
       <TinyMCE />
     </div>
   </template>

   <script>
   import TinyMCE from '@/components/TinyMCE.vue';

   export default {
     name: 'Page',
     components: {
       TinyMCE,
     },
   };
   </script>

在上述代码中，我们将TinyMCE组件引入到需要使用的页面中。

这样，你就可以在Vue 3项目中使用TinyMCE编辑器了。你可以根据需要调整TinyMCE的配置和样式。注意，代码示例中的路径和文件名可能需要根据你的项目结构进行调整。