vue-tinymce-editor组件v-model绑定异常仅Safari正常Chrome失效

云原生阿岚

2026-9-28

问题根因

你使用的第三方vue-tinymce-editor包已停止维护多年，内部仅适配了早期浏览器的内容变更事件监听逻辑，Chrome后续更新了富文本编辑场景的事件触发规则，该包没有跟进兼容，而Safari的对应事件逻辑未发生变化，所以出现跨浏览器适配异常。

可直接落地的解决方法

方案1：手动绑定内容变更事件（无需换包，改现有代码即可）

废弃原有的v-model语法糖，改为手动监听编辑器所有内容变更场景同步数据：

调整组件调用代码：

<tinymce id="1"
         :other_options="tinyOptions"
         :value="menu">
</tinymce>

在你的tinyOptions配置中新增setup钩子，手动同步内容：

tinyOptions: {
  // 保留你原有所有其他配置不变，新增以下代码
  setup: (editor) => {
    // 监听所有可能触发内容变化的事件
    editor.on('keyup change undo redo ExecCommand SetContent', () => {
      this.menu = editor.getContent()
    })
  }
}