本文详解如何在 Vue 3 组件中正确集成 TinyMCE 富文本编辑器，并通过 v-model 实现符合 Vue 响应式规范的双向绑定，重点纠正事件监听、prop 命名及 emit 时机等常见错误。
本文详解如何在 vue 3 组件中正确集成 tinymce 富文本编辑器，并通过 `v-model` 实现符合 vue 响应式规范的双向绑定，重点纠正事件监听、prop 命名及 `emit` 时机等常见错误。
在 Vue 3 中为第三方富文本编辑器（如 TinyMCE）封装支持 v-model 的自定义组件时，需严格遵循 Vue 的 v-model 机制：子组件接收名为 modelValue 的 prop，并在值变更时触发 update:modelValue 自定义事件。但实践中常因事件选择不当、v-model 语法误用或内容获取方式错误导致绑定失效。
✅ 正确用法：精简父组件调用
父组件中不应使用 v-model:text="text"——该语法仅在子组件定义了非默认绑定字段（如 textValue）时才需显式指定修饰符。由于你的子组件已按约定接收 modelValue，应直接使用标准语法：
<!-- ✅ 正确：简洁且语义清晰 --> <TinyMCE v-model="text" />
同时移除冗余的 @update:modelValue 监听和 handleTextUpdate 方法——v-model 已自动完成赋值与更新，重复监听反而干扰响应链。
✅ 子组件：使用 @selection-change 替代 @change
TinyMCE 并非原生 <input> 元素，其内容变更无法通过 @change 事件可靠捕获（该事件在失焦时才触发，且 $event.target.value 不适用）。官方推荐监听 @selection-change（编辑器选区变化时触发），并在回调中通过 editor.getContent() 主动获取 HTML 内容：
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
<template>
<div>
<Editor
:value="modelValue"
api-key="your-api-key" <!-- ⚠️ 生产环境请使用环境变量 -->
:init="{
plugins: 'lists link image table code help wordcount',
toolbar: 'undo redo | bold italic | bullist numlist | link image'
}"
@selection-change="onSelectionChange"
/>
</div>
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const onSelectionChange = (event, editor) => {
// ✅ 主动获取当前 HTML 内容，确保实时性
emit('update:modelValue', editor.getContent())
}
</script>? 补充说明：若需更精细控制（如防抖提交、仅在失焦时更新），可改用 @blur 事件，但 @selection-change 更适合实时同步场景。
? 完整父子组件示例
父组件（Parent.vue）
<template>
<div class="flex flex-col items-center gap-4 p-4">
<h2>Vue + TinyMCE v-model 示例</h2>
<TinyMCE v-model="content" />
<div
class="border border-gray-300 p-3 rounded w-full max-w-2xl min-h-[150px]"
v-html="content"
/>
<button
@click="console.log('当前内容:', content)"
class="px-4 py-2 bg-blue-600 text-white rounded"
>
输出内容到控制台
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import TinyMCE from './TinyMCE.vue'
const content = ref('<p>欢迎使用 <strong>TinyMCE</strong> 编辑器！</p>')
</script>⚠️ 关键注意事项
- API Key 安全：切勿硬编码 API Key，应通过 .env 文件注入（如 VUE_APP_TINY_API_KEY），并在组件中读取 import.meta.env.VUE_APP_TINY_API_KEY。
- 初始化延迟：TinyMCE 加载需时间，首次 modelValue 赋值可能被忽略。建议在 onMounted 中延迟设置，或使用 v-if="editorReady" 控制渲染时机。
- 内容安全性：v-html 渲染 HTML 时存在 XSS 风险，生产环境应结合 DOMPurify 等库过滤内容。
- 性能优化：高频 selection-change 可能引发性能问题，如需降低频率，可在 onSelectionChange 中添加防抖逻辑（例如使用 lodash/debounce）。
遵循以上实践，即可实现 TinyMCE 在 Vue 3 中稳定、高效、符合官方规范的双向绑定。
