使用 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 对象失效。
