Vue3 Vite中Quill Editor数据双向绑定失效问题求助

问题根源 #

Quill Editor 本身并未实现 Vue3 的 v-model 语法糖，直接使用 v-model 无法自动完成数据双向同步，需要手动封装组件实现绑定逻辑。

解决步骤 #

1. 确认依赖安装 #

确保已安装必要的包：

npm install quill @vueup/vue-quill
# 或使用 yarn
yarn add quill @vueup/vue-quill

2. 封装支持双向绑定的 Quill 组件 #

修改你的自定义 Editor 组件，实现 modelValue 接收与 update:modelValue 事件触发的双向绑定核心逻辑：

<template>
  <QuillEditor
    ref="quillInstance"
    :content="modelValue"
    @update:content="syncContentToModel"
    <!-- 保留你的其他配置项，比如主题、工具栏等 -->
  />
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])
const quillInstance = ref(null)

// 编辑器内容变化时同步到父组件数据模型
const syncContentToModel = (content) => {
  emit('update:modelValue', content)
}

// 暴露清空编辑器的方法给父组件
const clearEditor = () => {
  quillInstance.value?.setContent('')
}

defineExpose({ clearEditor })
</script>

3. 父组件（HomeVue.vue）中使用 #

在父组件中正常使用 v-model，并处理提交、重置逻辑：

<template>
  <div class="container">
    <Editor v-model="richContent" ref="editorRef" />
    <input v-model="plainContent" placeholder="普通输入框对比" />
    <button @click="handleSubmit">提交</button>
    <button @click="handleReset">重置</button>
  </div>
</template>

<script setup>
import Editor from './components/Editor.vue'

const richContent = ref('初始富文本内容')
const plainContent = ref('初始输入框内容')
const editorRef = ref(null)

const handleSubmit = () => {
  // 此时 richContent 已同步编辑器最新内容
  console.log('提交富文本:', richContent.value)
  console.log('提交输入框:', plainContent.value)
}

const handleReset = () => {
  // 清空数据模型
  richContent.value = ''
  plainContent.value = ''
  // 主动清空编辑器（避免数据同步延迟）
  editorRef.value?.clearEditor()
}
</script>

4. 全局注册配置（可选） #

如果需要全局注册 Quill 组件，在 main.js 中添加：

import { createApp } from 'vue'
import App from './App.vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const app = createApp(App)
app.component('QuillEditor', QuillEditor)
app.mount('#app')

核心注意事项 #

• 必须通过 @update:content 事件将编辑器内容主动同步到父组件的 modelValue
• 重置时，先清空父组件的响应式变量，再调用编辑器的清空方法确保UI同步
• 页面加载时，组件的 modelValue 会自动传递给 Quill 的 content 属性，实现初始值同步

内容的提问来源于stack exchange，提问作者anshink