HierarchyRequestError：使用工具栏命令进行Wysihtml5x编辑器样式的错误

Question

我使用的是wysihtml5x编辑器（v0.4.12），当双击工具栏链接更改文本的字体颜色时，我发现问题。

我准备了一个jsFiddle与一个非常简约的代码，再现了这个问题。

var editor = new wysihtml5.Editor("wysihtml5-editor", { 
 
    toolbar: "wysihtml5-toolbar", 
 
    parserRules: wysihtml5ParserRules, 
 
    contentEditableMode: false 
 
}); 
 

 
var editor2 = new wysihtml5.Editor("wysihtml5-editor2", { 
 
    toolbar: "wysihtml5-toolbar2", 
 
    parserRules: wysihtml5ParserRules, 
 
    contentEditableMode: false 
 
});

div[contenteditable="true"] { 
 
    border: solid grey 1px; 
 
    height: 150px; 
 
} 
 
.wysiwyg-color-red { 
 
    color: red; 
 
} 
 
.wysiwyg-color-black { 
 
    color: black; 
 
} 
 
a[data-wysihtml5-command-value="red"] { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
a[data-wysihtml5-command-value="black"] { 
 
    color: black; 
 
    text-decoration: none; 
 
}

<script src="https://rawgit.com/Voog/wysihtml5/textcolor/parser_rules/advanced_unwrap.js"></script> 
 
<script src="https://rawgit.com/Voog/wysihtml/0.4.12/dist/wysihtml5x-toolbar.js"></script> 
 
<link href="https://github.com/Voog/wysihtml/blob/0.4.12/examples/css/stylesheet.css" rel="stylesheet" /> 
 
<div id="wysihtml5-editor" contenteditable="true"><span class="wysiwyg-color-red">Please follow these steps to reproduce the problem:</span> 
 
    <br>1.Click on the editor below just to give focus to it. 
 
    <br>2.Select all the text on the first editor (CTRL+A or using the mouse). 
 
    <br>3.Double click on <span class="wysiwyg-color-red">red</span> link toolbar of the first editor. 
 
    <br>4.Open the console to see the error (F12). 
 
    <br>5.You should be able to see the <span class="wysiwyg-color-red">Uncaught HierarchyRequestError:</span> 
 
    <br>6.Ignore the 'Discontiguous selection is not supported.' error.</div> 
 
<div id="wysihtml5-toolbar" style="display: none;"> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="black">black</a> 
 
    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> 
 
</div> 
 
<div id="wysihtml5-editor2" contenteditable="true"><span class="wysiwyg-color-red">The</span> quick brown fox jumps over the lazy dog</div> 
 
<div id="wysihtml5-toolbar2" style="display: none;"> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="black">black</a> 
 
    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> 
 
</div>

可以在控制台下面提供的jsfiddle的步骤时，可以看到该错误：

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

我与Wysihtml5x编辑器的最新版本，同样的问题测试发生。请忽略不支持Discontiguous选择。错误，因为这是在最新版本的编辑器中已经解决的问题。

我不确定这个错误是否只发生在多个编辑器中，但我添加了两个，因为它是我在发现问题时使用的。

我在项目的Git Issue Tracker上有opened the issue。

它可能与此编辑器的issue opened on Xing base repository有关。

我无法重现Firefox 37.0.2上的错误，这让我认为它不会发生在Firefox上。

您的帮助非常感谢，谢谢。

Answer 1

已在版本0.5.2上解决了此问题。所有这些，包括'Discontiguous选择不支持。'

非常感谢@ oliver-pulges指出了答复GitHub issue的解决方案。