记录在 Vue 3 项目中使用富文本编辑器时遇到的双向绑定不同步问题及解决方案。

一、问题现象

  • 编辑器内容变化，但绑定的 v-model 数据未更新
  • 外部修改数据，编辑器内容未同步
  • 控制台无报错，但视图和数据不同步

二、常见原因

  1. 编辑器不支持原生 v-model

    • 许多富文本库（如 Quill、TinyMCE、WangEditor）并不直接触发 Vue 的 input 事件

  2. 初始化值覆盖问题

    • 编辑器初始化后，外部数据更新被覆盖

  3. 事件绑定错误

    • 没有监听编辑器的 onChange 或 onInput 回调

  4. 异步渲染延迟

    • 在 onMounted 时立即设置内容，编辑器尚未完成初始化

三、解决方案

1. 手动监听编辑器事件

<template>
  <quill-editor
    v-model="content"
    @text-change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
const content = ref('')

function handleChange({ html }) {
  content.value = html
}
</script>

2. 外部数据更新时同步到编辑器

watch(content, (val) => {
  if (editor && editor.getHTML() !== val) {
    editor.setHTML(val)
  }
})

3. 延迟初始化赋值

onMounted(() => {
  setTimeout(() => {
    editor.setHTML(initialContent)
  }, 0)
})

四、调试建议

  • 检查编辑器是否支持 v-model 或需要 modelValue 手动实现
  • 确认编辑器事件回调能正确拿到 HTML 或 Delta 数据
  • 确保初始化与外部赋值逻辑不互相覆盖

五、小结

富文本编辑器的双向绑定需要结合事件监听与数据同步机制来实现，不能完全依赖 Vue 的默认 v-model。