Vue2中使用WangEditor父组件概率性触发未知错误求助

问题现象 #

点击父组件打开WangEditor编辑器时，未修改富文本内容或执行其他操作，会概率性触发错误，核心报错为 Error: Cannot find a descendant at path [0,1] in node。

完整错误信息 #

[Vue warn]: Error in mounted hook: "Error: Cannot find a descendant at path [0,1] in node: {"children":[{"type":"paragraph","children":[{"text":"给定以下 JSP 代码片段："}]},{"type":"pre","children":[{"type":"code","language":"","children":[{"text":"<% int x = 1; %>
<%! int x = 10; %>
x = <%=x++%>"}]}]},{"type":"paragraph","children":[{"text":"有"},{"text":" 2 "},{"text":"个客户依次浏览该"},{"text":" JSP"},{"text":"，且每个客户只浏览一次，则第"},{"text":"2 "},{"text":"个客户会看到浏览器显示（）"}],"indent":"28px"},{"type":"paragraph","children":[{"text":""}]}],"operations":[{"type":"merge_node","path":[0,1],"position":4,"properties":{}},{"type":"merge_node","path":[0,1],"position":9,"properties":{}}],"selection":null,"marks":null,"id":"wangEditor-1","isDestroyed":false,"isFullScreen":false,"history":{"undos":[[{"type":"merge_node","path":[0,1],"position":4,"properties":{}},{"type":"merge_node","path":[0,1],"position":9,"properties":{}}]],"redos":[]}}

vue.runtime.esm.js?2b0e:3047 Error: Cannot find a descendant at path [0,1] in node: {"children":[{"type":"paragraph","children":[{"text":"给定以下 JSP 代码片段："}]},{"type":"pre","children":[{"type":"code","language":"","children":[{"text":"<% int x = 1; %>
<%! int x = 10; %>
x = <%=x++%>"}]}]},{"type":"paragraph","children":[{"text":"有"},{"text":" 2 "},{"text":"个客户依次浏览该"},{"text":" JSP"},{"text":"，且每个客户只浏览一次，则第"},{"text":"2 "},{"text":"个客户会看到浏览器显示（）"}],"indent":"28px"},{"type":"paragraph","children":[{"text":""}]}],"operations":[{"type":"merge_node","path":[0,1],"position":4,"properties":{}},{"type":"merge_node","path":[0,1],"position":9,"properties":{}}],"selection":null,"marks":null,"id":"wangEditor-1","isDestroyed":false,"isFullScreen":false,"history":{"undos":[[{"type":"merge_node","path":[0,1],"position":4,"properties":{}},{"type":"merge_node","path":[0,1],"position":9,"properties":{}}]],"redos":[]}}
at Object.get (index.esm.js?cb23:2487:1)
at Object.first (index.esm.js?cb23:2416:1)
at Object.path (index.esm.js?cb23:1648:1)
at Object.nodes (index.esm.js?cb23:1474:1)
at nodes.next (<anonymous>)
at eval (index.esm.js?cb23:4568:1)
at Object.withoutNormalizing (index.esm.js?cb23:2243:1)
at Object.mergeNodes (index.esm.js?cb23:4522:1)
at normalizeNode (index.esm.js?cb23:380:1)
at o.normalizeNode (index.esm.js?cb23:17547:1)

已尝试的解决方案 #

目前已做以下操作，但问题仍未解决：

• 子组件通过Props实现父子通信，用watch监听数据变化同步内容
• 组件销毁时调用editor.destroy()销毁编辑器实例

子组件核心代码：

<Editor
  :style="editorStyle"
  v-model="html"
  :defaultConfig="editorConfig"
  :mode="mode"
  @onCreated="onCreated"
  @onChange="onChange(html)"
/>

<script>
export default {
  // ...其他配置
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() 
  },
  watch: {
    html(newValue) {
      this.$emit('input', newValue)
    },
    value(newValue) {
      this.html = newValue
    }
  }
}
</script>

触发场景代码 #

编辑表单时，通过Axios请求获取数据后直接为form.content赋值，绑定到WangEditor的v-model：

<WangEditor v-model="form.content"
    :editorStyle="{ height: '220px' }"
    @itemUpdate="uploadQuestionInfoImage"
    ref="itemWE"></WangEditor>

// Axios请求完成后赋值
this.form.content = questionData.content

求该问题的解决方法。

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