Vue.js中Summernote富文本编辑器数据绑定问题求助

Summernote是基于jQuery的第三方插件，并非Vue原生组件，直接通过:model或自定义change事件无法实现数据绑定，需要手动处理编辑器与Vue数据的同步逻辑，具体方案如下：

步骤1：调整模板结构 #

移除无效的:model和v-on:change属性，仅保留编辑器容器：

<div id="summernote" name="editor"></div>

步骤2：初始化编辑器并绑定数据同步逻辑 #

在组件生命周期钩子中完成编辑器初始化，同时实现双向数据同步：

export default {
  data() {
    return {
      form: {
        trip_notes: null
      }
    }
  },
  mounted() {
    // 初始化Summernote，配置基础参数并设置初始内容
    $('#summernote').summernote({
      height: 300, // 编辑器高度，可按需调整
      code: this.form.trip_notes,
      callbacks: {
        // 监听编辑器内容变化，同步到Vue数据
        onChange: (contents) => {
          this.form.trip_notes = contents
        }
      }
    })
  },
  watch: {
    // 监听Vue数据变化，反向同步到编辑器（避免循环更新需做内容校验）
    'form.trip_notes'(newVal) {
      const currentEditorContent = $('#summernote').summernote('code')
      if (newVal !== currentEditorContent) {
        $('#summernote').summernote('code', newVal)
      }
    }
  },
  beforeUnmount() {
    // 组件销毁时销毁编辑器实例，防止内存泄漏
    $('#summernote').summernote('destroy')
  }
}

关键说明 #

• 确保项目已正确引入jQuery、Summernote的CSS和JS资源（Summernote依赖jQuery运行）
• onChange回调会在编辑器内容实时变化时触发，保证Vue数据与编辑器内容一致
• watch逻辑用于处理外部数据更新场景（比如从后端加载编辑内容），内容校验可避免双向同步时的循环触发
• 组件销毁时调用destroy方法清理编辑器实例，避免残留DOM和事件监听引发问题

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