使用vue-ckeditor5触发setEventListener类型错误且绑定数据不显示如何解决

错误原因 #

• 报错触发点是源码中Object.keys(r)这行代码，其中r = n._events，n对应ckeditor实例的editing.view.document对象。_events是ckeditor5的内部私有属性，你当前使用的vue-ckeditor5第三方封装包和@ckeditor/ckeditor5-build-classic版本不兼容：要么是ckeditor5新版本修改了该私有属性的挂载时机/命名规则，要么是封装包调用该属性的时机早于ckeditor实例完全初始化的时间点，导致r为undefined，传入Object.keys时触发类型错误。
• 初始绑定数据不显示是因为setEventListeners方法执行报错后直接中断了后续逻辑，v-model的初始值同步逻辑、编辑器数据双向绑定的监听逻辑都没有正常执行，所以初始值无法渲染到编辑器中。

解决方法 #

方案1：替换为CKEditor官方Vue封装包（最稳定） #

弃用第三方vue-ckeditor5包，改用官方维护的适配包，可从根源避免版本兼容问题：

1. 安装对应版本的官方适配包（Vue2项目使用@ckeditor/ckeditor5-vue2，Vue3项目使用@ckeditor/ckeditor5-vue）

# Vue2 安装示例
npm install @ckeditor/ckeditor5-vue2

2. 替换导入和注册逻辑：

import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from '@ckeditor/ckeditor5-vue2'

Vue.use(CKEditor)

3. 组件调用写法调整：

<ckeditor :editor="ClassicEditor" v-model="details"></ckeditor>

方案2：修复当前封装包的兼容问题 #

如果必须使用当前的vue-ckeditor5包，可二选一修复：

• 临时修复运行时报错：修改vue-ckeditor5源码中setEventListeners方法的Object.keys(r)部分，添加空对象兜底：

// 原代码
u = Object.keys(r)
// 修改为
u = Object.keys(r || {})

• 延迟初始值赋值：不要在data中直接给details赋初始值，监听编辑器的初始化完成事件，实例就绪后再赋值：

<ckeditor type="classic" v-model="details" @ready="onEditorReady"></ckeditor>

data() {
  return {
    details: ''
  }
},
methods: {
  onEditorReady() {
    this.details = "These are details"
  }
}

方案3：降级CKEditor5版本 #

将@ckeditor/ckeditor5-build-classic降级到和vue-ckeditor5匹配的版本，比如v16.x版本，版本匹配后私有属性的调用逻辑可正常运行。

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