@tinymce/tinymce-vue属性

### 关于 `@tinymce/tinymce-vue` 属性的相关文档和用法 #### 官方文档地址 官方文档提供了详细的集成指南以及属性说明，可以通过以下链接访问： [TinyMCE Vue Integration Documentation](https://www.tiny.cloud/docs/integrations/vue/) [^1] #### 基本属性介绍 以下是 `@tinymce/tinymce-vue` 中常用的属性及其功能： 1. **init**: 这是一个对象类型的属性，用于传递 TinyMCE 初始化参数。这些参数可以控制编辑器的行为、外观和其他特性。例如设置工具栏按钮、插件加载等。 ```javascript init={{ height: 500, menubar: false, plugins: 'link image code', toolbar: 'undo redo | link image | bold italic | code' }} ``` 2. **modelValue / v-model (Vue 3)** 或 value (Vue 2): 绑定到编辑器的内容数据模型。当用户修改编辑器中的内容时，该绑定值会自动更新。对于 Vue 3 使用 `v-model:modelValue`；而对于 Vue 2 则使用 `value` 和事件监听来实现双向绑定。 3. **apiKey**: 需要提供有效的 API 密钥才能正常使用在线服务（如云存储）。如果未指定，则默认为开发模式下的临时密钥。建议从官方网站获取正式授权码并填入此字段中。 ```html :apiKey="'your-api-key-here'" ``` 4. **disabled**: 设置布尔值决定是否禁用整个控件，默认情况下允许交互操作。将其设为 true 可锁定界面防止进一步更改。 5. **language**: 改变语言环境以支持国际化需求。接受 ISO 639-1 标准的语言代码作为字符串形式传入即可切换对应本地化文案显示效果。 6. **onInit/onEditorChange**: 提供两个回调函数分别响应初始化完成后的动作以及每次内容发生改变之后触发的动作处理逻辑。 7. **otherProps...** 此外还有许多其他可选配置项可以根据实际项目情况灵活调整应用范围内的具体表现样式等功能扩展选项列表详见上述提到过的官方资源页面链接部分查阅更多细节描述信息等内容[^2]. #### 示例代码片段 下面展示如何在一个简单的 Vue 应用程序中正确地引入和配置 Tinymce 编辑器组件实例： ```vue <template> <editor v-model="content" :init="editorConfig" apiKey="no-api-key-needed-for-local-testing" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import Editor from '@tinymce/tinymce-vue'; const content = ref('<p>初始 HTML 内容...</p>'); const editorConfig = { height: 400, menubar: false, plugins: ['advlist autolink lists link charmap preview anchor', 'searchreplace visualblocks code fullscreen'], toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | removeformat' }; </script> ```