wangEditor editor.setHtml 有 JS 报错

trafficstars

bug 描述

Error in v-on handler: "Error: Cannot find a descendant at path [1,1,0] in node: {"children":[],"operations":[{"type":"remove_node","path":[0],"node":

你预期的样子是？

我三个按钮分别对应三个内容，当我按下后编辑器内的内容会跟着变，但是当我修改其中一个内容或者点击到了里面的图片或者表格，再次点击按钮就会报错并且内容全部清空了

系统和浏览器及版本号

操作系统
win10
浏览器和版本 Edge

wangEditor 版本

v5

demo 能否复现该 bug ？

不能以下是按钮的方法 showExplain(content) { this.editor.selectAll() //全选 this.editor.deleteFragment() //删除 this.editor.clear() //清空 this.editor.setHtml(content) //赋值 },

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

步骤一
准备编辑器，准备三组内容和对应按钮（包含图片）
步骤二
修改其中一个按钮的内容或者点击里面的图片
步骤三
再次点击其他按钮，bug出现，报错并且内容全部空白

Sep 22 '22 05:09 fdj0926

Cannot get the start point in the node at path [] because it has no start text node. 还有这个错误

Sep 22 '22 05:09 fdj0926

以下是按钮的方法 showExplain(content) { this.editor.selectAll() //全选 this.editor.deleteFragment() //删除 this.editor.clear() //清空 this.editor.setHtml(content) //赋值 },

直接执行 this.editor.setHtml(content) 试试

Sep 22 '22 05:09 wangfupeng1988

试过了，还是不行

Sep 22 '22 05:09 fdj0926

提供给一个简单的 demo 吧

能复现问题即可，越简单越好

Sep 22 '22 06:09 wangfupeng1988

当你在其中一个按钮的内容中添加表格或者图片，或者原本就有图片或表格而你点击了这个表格或者图片，那么就会出现这个bug

Sep 22 '22 09:09 fdj0926

乱码了，这里贴图

Sep 22 '22 09:09 fdj0926

可以看到就只是加了三个按钮并且赋了值

Sep 22 '22 09:09 fdj0926

可以看到就只是加了三个按钮并且赋了值

我没复现这个问题。你提供在线 demo 吧，以下三选一即可

https://codesandbox.io/
https://codepen.io/
https://stackblitz.com/

Sep 23 '22 01:09 wangfupeng1988

我用在线demo的话提示this.editor.setHtml不是函数

Sep 23 '22 02:09 fdj0926

https://user-images.githubusercontent.com/113874889/191885515-141b9a94-6b19-45b2-a01e-6b2e8455cacd.mp4

Sep 23 '22 03:09 fdj0926

我用在线demo的话提示this.editor.setHtml不是函数

猜测你安装的 @wangeditor/editor 不是最新版

Sep 23 '22 04:09 wangfupeng1988

哥，我的代码是可以用这个函数的，您看一下我的演示视频，我的代码也给您上面贴了，您可以试一下，包括我在群里也询问群友，也是没有解答出来的

Sep 23 '22 04:09 fdj0926

复现了。

复现步骤

在 demo https://www.wangeditor.com/demo/ ，打开控制台
执行 editor.setHtml('111') ，可以成功
在编辑器插入一个表格，表格最后一个单元格输入几个文字
执行 editor.setHtml('222') ，就有 js 报错

Sep 23 '22 05:09 wangfupeng1988

恩恩，是这样的，有解决方案吗？不光是插入表格，存在图片的时候也是，删除或者添加都会出bug

Sep 23 '22 05:09 fdj0926

官方大佬能及时修复吗

Sep 23 '22 05:09 umlink

我本地没有复现这个问题，比较怪异，我下周高优看下。

Sep 23 '22 08:09 wangfupeng1988

我修改了展现形式，在编辑器外面套了个dialog，然后每次关闭dialog就调用editor.destroy（）,这样子就没问题了，所以我怀疑是不是缓存的问题？

Sep 23 '22 08:09 fdj0926

建议你用个定时器去包裹你的setHtml函数执行试试

Sep 23 '22 09:09 leidao

也遇到了这个问题用的v5版本组件的方式 v-model 绑定的值临时v-if强制销毁解决的问题

Sep 23 '22 12:09 tudou99

试过了，还是不行

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2022年9月22日(星期四) 中午1:37 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [wangeditor-team/wangEditor] 给编辑器赋值进行编辑或者点到图片时，会报错并且内容消失 (Issue #4878)

以下是按钮的方法 showExplain(content) { this.editor.selectAll() //全选 this.editor.deleteFragment() //删除 this.editor.clear() //清空 this.editor.setHtml(content) //赋值 },

直接执行 this.editor.setHtml(content) 试试

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

Oct 11 '22 09:10 fdj0926

react 组件在设置 html 同样报这个问题

Nov 01 '22 08:11 moonshineknight

我修改了展现形式，在编辑器外面套了个dialog，然后每次关闭dialog就调用editor.destroy（）,这样子就没问题了，所以我怀疑是不是缓存的问题？

兄弟有答案了吗？？

Nov 01 '22 08:11 moonshineknight

Error: Cannot find a descendant at path [1] in node: {"children":[{"type":"paragraph","children":[{"text":""}]}]," 大神们救救命啊

Nov 05 '22 15:11 moonshineknight

这个bug修复了吗

Nov 14 '22 03:11 liyefox

这个bug修复了吗

Nov 20 '22 07:11 nowui

@nowui @liyefox @moonshineknight 说一下我的解决方法：我使用了vue2框架，在组件上用v-model绑定了一个值，在调用接口之前先把这个绑定的值清空再去setHtml()就可以了

Nov 25 '22 03:11 sechi747

用完把编辑器销毁可以避免出现这个bug, 我这里用的是v-if

<template>
  <el-dialog v-model="show">
    <div class="editor" v-if="show">
      <Toolbar class="toolbar" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor
        style="height: 400px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
  </el-dialog>
</template>