vue3 使用tinymce/tinymce-vue

### 配置和初始化 TinyMCE 富文本编辑器 在 Vue3 项目中集成 `tinymce-vue` 插件并配置和初始化 TinyMCE 编辑器的过程如下： #### 1. 安装依赖 通过 npm 或 yarn 安装所需的包： ```bash npm install --save @tinymce/tinymce-vue tinymce ``` 或者使用 yarn： ```bash yarn add @tinymce/tinymce-vue tinymce ``` 如果需要支持中文语言或其他功能模块，可以额外安装对应的资源文件[^1]。 --- #### 2. 创建富文本编辑器组件 创建一个新的 Vue 组件用于封装 Tinymce 编辑器的功能。以下是完整的实现代码示例： ```vue <template> <editor api-key="your-api-key" v-model="content" :init="editorInitConfig" /> </template> <script> import { ref } from 'vue'; import Editor from '@tinymce/tinymce-vue'; export default { components: { Editor, }, setup() { const content = ref('<p>初始内容</p>'); const editorInitConfig = { height: 500, // 设置高度 menubar: true, // 显示菜单栏 plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic underline strikethrough | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image | code', // 工具栏按钮配置[^2] language: 'zh_CN', // 使用中文语言包 }; return { content, editorInitConfig, }; }, }; </script> ``` --- #### 3. 获取 API Key TinyMCE 提供了一个免费的基础版本，但仍需注册获取一个 API Key。如果没有提供有效的 API Key，则会显示警告提示。可以通过访问官网 [https://www.tiny.cloud/](https://www.tiny.cloud/) 注册账号并生成 API Key。 将其替换到模板中的 `api-key` 属性位置即可生效。 --- #### 4. 加载本地化语言包（可选） 为了加载特定的语言包（如中文），可以在项目的入口文件中引入对应的语言文件： ```javascript // main.js import 'tinymce/langs/zh_CN'; // 引入中文语言包 ``` 也可以动态加载语言包，在初始化配置中设置 `language_url` 和 `language` 参数： ```javascript const editorInitConfig = { ... language_url: '/path/to/langs/zh_CN.js', // 自定义路径 language: 'zh_CN', }; ``` --- #### 5. 动态调整工具栏和插件 可以根据需求自定义工具栏和启用的插件列表。例如，增加表格操作、代码高亮等功能时，只需扩展 `plugins` 和 `toolbar` 的配置项。 --- ### 注意事项 - 如果未指定 `v-model`，则无法实现双向绑定。 - 确保网络环境允许访问 TinyMCE CDN 资源；若离线部署，需手动下载相关静态资源并修改配置指向本地路径。 ---