使用 wangeditor 时报错 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions') 和 Uncaught (in promise) Error: Cannot find a descendant at path [2] in node: {"children":[{"type":"paragraph","children":

wangeditor版本 V4 官网：编辑器 API | wangEditor

一、报错情况

在我使用 wangeditor 时，我将编辑框的 v-model 设定成了一个变量,通过 双向绑定 WangEditor 的内容通过更新 到 exptForm[tableValue] 中 外部的数据变化也会更新编辑器的内容。

于是在 wangeditor 编辑框输入内容之后，通过 exptForm[tableValue] 改变编辑框的值，再次切回最开始的值时，就会报错这个问题。

// 我这边使用
<Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      mode="default"
    />
    <Editor
      style="height: 350px; overflow-y: auto"
      v-model="exptForm[tableValue]"
      :defaultConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated"
/>


const editorRef: any = shallowRef(null);

在我多次的验证下，我发现不是我这里的 exptForm[tableValue] 赋值和 wangeditor 异步渲染导致的报错。也不是在外部赋值内容进来之后样式缺少而导致的报错。

而是，只要在我聚焦编辑框，同时手动赋值时，就会报错以下的内容。

报错：

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')
at shouldUpdateComponent (chunk-D54OAVWK.js?v=3539d3f8:2417:27)
at updateComponent (chunk-D54OAVWK.js?v=3539d3f8:7113:9)
at processComponent (chunk-D54OAVWK.js?v=3539d3f8:7061:7)
at patch (chunk-D54OAVWK.js?v=3539d3f8:6523:11)
at patchBlockChildren (chunk-D54OAVWK.js?v=3539d3f8:6910:7)
at patchElement (chunk-D54OAVWK.js?v=3539d3f8:6802:7)
at processElement (chunk-D54OAVWK.js?v=3539d3f8:6650:7)
at patch (chunk-D54OAVWK.js?v=3539d3f8:6511:11)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-D54OAVWK.js?v=3539d3f8:7258:9)
at ReactiveEffect.run (chunk-D54OAVWK.js?v=3539d3f8:431:19)
和
chunk-Y4OLSECU.js?v=3539d3f8:2955 Uncaught (in promise) 
Error: 
Cannot find a descendant at path [2] in node: 
{"children":[{"type":"paragraph","children":

二、报错解析

首先解析一下报错的内容

第一个 Uncaught (in promise) Error: Cannot find a descendant at path [2] in node: {"children":[{"type":"paragraph","children":，的错误信息说，在查找某一个节点时， 无法在路径 [2] 处找到对应的子节点，就是没有找到对应的节点元素。

第二个 Cannot read properties of null (reading 'emitsOptions') 也是一样的 尝试访问一个 null 或 undefined 值的 emitsOptions 属性。

两者都指向一个空的节点元素没有找到。

于是我通过排查法，筛选出 富文本组件初始化正常、编辑框双向绑定对象正常，赋给v-model 的值也正常，甚至我把变量值的类型也检查了，在编辑框中也无异常。

最后我把重点放在了聚焦之后才报错这个问题上，于是摘到了 罪魁祸首 ，编辑框中 光标元素，在编辑框中会自动的寻找并渲染 光标节点，而我在切换值时，光标的缺失导致了 报错 null 和undefined 原因。

所以问题找到了，接下来就是如何解决！！！

三、解决方法

在你对编辑框赋值或者改动之前，先 重新恢复选区或者重置你的选框内容，让光标重置。

可以通过 Toolbar 实例调用以下方法，来解决具体报错的情况

// 我这里的 vue 的写法，按照实际情况调用 方法
editorRef.value.restoreSelection();    // 恢复最近一次非 null 选区。如编辑器 blur 之后，再重新恢复选区。

editorRef.value.deselect(); // 取消选中，如果值为空的话，调用这个可能继续报错。

editorRef.value.focus();   // 选区定位到最后

editorRef.value.blur();   // 失焦

执行方法之后，就可以正常切换内容并且不会报错了。记得每一次编辑框的内容改变之后，要重新初始化 编辑框中的选区，否则在赋值之后，重新聚焦或者重新再编辑框中打开每一个弹框都可能报错以上的问题