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

原创

于 2020-10-22 16:22:10 发布 · 1.9k 阅读

CC 4.0 BY-SA版权

在AngularJS项目中使用wangEditor时遇到一个问题，点击新增富文本按钮后，控制台显示'The given range isn't in document.'警告。此警告导致除最新创建的富文本外，其他富文本编辑器失效，无法正常修改文本。经分析，问题出在使用`+=`操作符动态添加HTML，导致父DOM重新绘制所有子DOM，使wangEditor绑定的DOM对象失效。解决方案是避免直接更新innerHTML，确保wangEditor的内部DOM对象不被破坏，从而保持编辑器功能正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

使用 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 {