Redactor.js列表编辑导致Chrome崩溃，cpu达到100%

Question

我们使用Redactor.js作为一个富文本编辑器。

诚然，我们正在一个相当复杂的网页上使用它，但是我们的一切都很好，除了.

复制步骤

(1)在可编辑内容的div中选择所有这三个项：

• 项目1
• 项目2 项目3

(2)选择将这三项转换为无序列表。在编者的网站上，它将项目转换为：

项目1

项目2

• 项目3

在我们的站点上，Chrome选项卡变得没有响应，cpu使用率达到100%，但是Chrome从未正式关闭或崩溃该选项卡。选项卡保留到强制退出进程为止。

JS代码中发生了什么？

在redactor.js源代码(版本10.0.2)中，无序列表处理程序调用第4232行上的列表切换函数。当该函数运行时，它确定需要添加一个列表，需要删除一个列表(第4251行)。然后运行list remove函数(第4356行)，该函数运行：

document.execCommand('insert' + cmd);

变量cmd等于字符串"unorderedlist“，Chrome停止工作(在我们的站点上，而不是在编者的网站上)。

有什么不同吗？

对编者配置的更改似乎对此问题没有任何影响。不过，下面是我们的redactor.js配置对象：

 $this.redactor({
       allowedTags: ['a', 'abbr', 'acronym', 'address', 'article', 'aside', 'b', 'big', 'blockquote', 'br', 'button', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'dd', 'del', 'div', 'dl', 'dt', 'em', 'fieldset', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'i', 'img', 'label', 'legend', 'li', 'marquee', 'ol', 'option', 'p', 'pre', 'q', 's', 'samp', 'section', 'select', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'tt', 'u', 'ul', 'var', 'wbr'], 
        buttons: ['formatting', 'bold', 'italic', 'link', 'orderedlist', 'unorderedlist', 'outdent', 'indent'],
        cleanOnPaste: true, 
        clipboardImageUpload: false, 
        dragImageUpload: false, 
        dragFileUpload: false, 
        formatting: ['p', 'h1', 'blockquote', 'pre'],
        imageEditable: false, 
        imageLink: false, 
        imagePosition: false, 
        imageResizable: false, 
        linkTooltip: true,
        placeholder: self.config.placeholder,
        removeAttr:  [
          ['blockquote', 'class'],
          ['h1', 'class'],
          ['ol', 'class'],
          ['p', 'class'],
          ['ul', 'class']
        ],
        removeComments: true, 
        removeDataAttr: true, 
        removeEmpty: ['blockquote', 'em', 'h1', 'ol', 'p', 'pre', 'span', 'strong', 'ul'],
        replaceTags: [
          ['big', 'strong'],
          ['strike', 'del']
        ],
        tabKey: true,
        toolbarExternal: '#mceTextTools' + index,
        blurCallback: function(e) {
        },
        changeCallback: function() {
        },
        clickCallback: function(e) {
        },
        focusCallback: function(e) {
        },
        keyupCallback: function(e) {
        },
        pasteCallback: function(html) {
        },
        pasteBeforeCallback: function(html) {
        },
        modalOpenedCallback: function (name, modal) {
        },
        initCallback: function() {
        }
      }); 

此外，我们怀疑这个问题可能是由于某些对document.execCommand反应不好的特定CSS规则造成的。下面是我们在s上使用的计算样式。

ul {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    color: rgb(68, 68, 68);
    cursor: auto;
    display: block;
    font-family: Georgia, Cambria, 'Times New Roman', serif;
    font-size: 18px;
    height: 32px;
    line-height: 32.4000015258789px;
    list-style-type: disc;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    width: 688px;
    word-wrap: break-word;
}
li {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    color: rgb(68, 68, 68);
    display: list-item;
    font-family: Georgia, Cambria, 'Times New Roman', serif;
    font-size: 18px;
    height: 32px;
    line-height: 32.4000015258789px;
    list-style-type: disc;
    margin-top: 0px;
    text-align: left;
    width: 648px;
    word-wrap: break-word;
}

任何想法都会非常感谢！

Answer 1

我们可以找到的唯一解决方案是将其添加到列表切换函数的开头(第4235行)：

var test = this.selection.getNodes();
_.each(test, function(v){
    if (v.tagName === 'BR'){
        this.selection.selectElement(this.selection.getBlocks()[0]);
    }
});

问题似乎在于this.selection.getCurrent()。有时，当所选内容中存在BRs时，getCurrent()不返回适当的文档节点。用上面的代码重置所选内容可以防止Chrome崩溃，但也会稍微改变有序/无序列表按钮的行为。

Answer 2

这是Redactor的支持的回应：

谢谢你伸出援手。不幸的是，我无法在http://imperavi.com/redactor再现这个问题。我怀疑在您的代码中可能有某种冲突。

如果你有任何问题请告诉我。