如何在 Vue 3 中实现 TinyMCE 编辑器的双向数据绑定与实时更新-js教程-PHP中文网

如何在 Vue 3 中实现 TinyMCE 编辑器的双向数据绑定与实时更新

本文详解如何在 Vue 3 组合式 API 中，通过 v-model 实现 TinyMCE 编辑器组件与父组件之间的双向数据同步，包括自定义 v-model:text 的正确写法、事件触发机制及可复用的最佳实践。

本文详解如何在 vue 3 组合式 api 中，通过 `v-model` 实现 tinymce 编辑器组件与父组件之间的双向数据同步，包括自定义 `v-model:text` 的正确写法、事件触发机制及可复用的最佳实践。

要在 Vue 3 中让 TinyMCE 编辑器的内容实时回传至父组件（如 TestComponent.vue），关键在于建立响应式的双向绑定，而非单向传递 props。Vue 的 v-model 机制正是为此设计：它本质是 :propName + @update:propName 的语法糖，需子组件主动配合实现。

首先，在 TinyMCE.vue 中需完成两件事：

接收 text prop 并监听编辑器内容变化；
通过 defineEmits 声明 update:text 事件，并在内容变更时触发。

以下是修正后的完整子组件代码（含 TinyMCE 内容同步逻辑）：

<!-- TinyMCE.vue -->
<template><div>
    <p>This will be Editor JS</p>
    <div name="editor">
      <editor api-key="" :init="{
          plugins: 'lists link image table code help wordcount',
          setup: (editor) => {
            // 监听内容变化并触发更新事件
            editor.on('input change UndoRedo', () => {
              emit('update:text', editor.getContent());
            });
          }
        }"></editor>
</div>
  </div>
</template><script setup>
import { computed } from 'vue'
import Editor from '@tinymce/tinymce-vue'

const props = defineProps({
  text: String
})

// ✅ 正确声明 emits
const emit = defineEmits(['update:text'])

// 可选：提供 v-model 语法支持（推荐）
// 注意：此处使用 props.text 而非 props.value.test（原答案有误）
const modelValue = computed({
  get() {
    return props.text
  },
  set(value) {
    emit('update:text', value)
  }
})
</script>

⚠️ 注意事项：

Auth0 Vue
在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

原答案中 props.value.test 是错误写法（props 中无 value 字段），应直接使用 props.text；

TinyMCE 的内容需通过 editor.getContent() 获取 HTML 字符串；

使用 editor.on('input change UndoRedo') 覆盖常见编辑场景（输入、格式变更、撤销重做），避免仅依赖 input 导致丢失部分更新。

在父组件 TestComponent.vue 中，即可简洁使用 v-model:text：

<!-- TestComponent.vue -->
<template><div class="h-screen flex w-screen flex-col items-center justify-center gap-5">
    <div>hello from test</div>
    <div class="h-[300px] w-[300px]">
      <!-- ✅ 使用 v-model:text 绑定 -->
      <tinymce v-model:text="text"></tinymce><div name="result" class="flex h-[300px] w-[300px] items-center justify-center border-2 border-black" v-html="text"></div>
    </div>
  </div>
</template><script setup>
import { ref } from 'vue'
import TinyMCE from './TinyMCE.vue'

const text = ref('')
</script>

你也可以选择显式写法（等价但更冗长）：

<tinymce :text="text"></tinymce>

✅ 总结：

v-model:text 是 :text + @update:text 的语法糖，子组件必须 emit('update:text', newValue) 才能生效；
TinyMCE 需在 setup 钩子中注册事件监听器，主动推送内容变更；
避免在子组件内维护独立 ref，所有状态应由父组件统一管理，确保响应链清晰可靠；
安全提示：生产环境务必移除空 api-key，改用服务端代理或环境变量注入。

这样，编辑器中的任意修改都会即时同步到 text 响应式变量，并自动渲染至下方 v-html 区域——真正实现「所见即所得」的数据流闭环。