[前端] 页面新增 wangEditor 出现的 The given range isn‘t in document.

it2026-02-12  11

问题:

使用 AngularJS 的时候,我在页面弄一个按钮可以新增 wangEditor 富文本,但是点了新增之后发现控制台出现: The given range isn't in document. 警告,其实这个警告问题还是很严重的,因为我页面上新增多个富文本时候,只有最新一个富文本的控件有效,而其他富文本都失效了,并且我使用

wangEditor.txt.html();

获取文本时候,发现除了最新一个可以修改,其他都不能修改,所以追踪 html() 看了看源码:

从 txt 原型进去:

html: function html(val) { var editor = this.editor; var $textElem = editor.$textElem; var html = void 0; if (val == null) { html = $textElem.html(); // 这个地方继续查看 html = html.replace(/\u200b/gm, ''); return html; } else { $textElem.html(val); editor.initSelection(); } }

查看到 $textElem.html() 这个地方:

html: function html(value) { var elem = this[0]; if (value == null) { return elem.innerHTML; // 这里是直接拿 dom 的 innerHTML } else { elem.innerHTML = value; return this; } }

发现这个地方是拿 dom 对象的 innerHTML,我对那些失效的富文本进行修改时候,获取不了修改文本,那就是意味着 dom 对象 innerHTML 没有改变,如果把这代码修改一下:

html: function html(value) { var elem = this[0]; if (value == null) { var ddd = elem.id ? document.getElementById(elem.id).innerHTML : ''; return elem.innerHTML; // 这里是直接拿 dom 的 innerHTML } else { elem.innerHTML = value; return this; } }

对 ddd 这个参数调试就发现,如果我对失效的 wangEditor 修改了富文本,再获取一次 dom 的 innerHTML 就能获取修改的内容,但是 elem.innerHTML 就还是没有修改的。

原来我新增一个富文本按钮有问题,我使用了

dom.innerHTML += '新增富文本标签'

这样子 += 处理新的 html 标签的话就会让整个 父dom 重绘 它的 innerHTML 所有 dom 对象,也就是说,+= 导致新增的富文本让原来的富文本 dom 对象更新了,就不再是 wangEditor 域里面绑定的 dom 对象,所以才抛出 The given range isn't in document.

那么富文本的其他控件,以及功能都会失效,因为 wangEditor 自己维护了 dom 对象,如果 html 内更新了 dom 对象就会导致 wangEditor 的内部 dom 对象失效。

最新回复(0)