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编辑器进行了测试，同样的问题也发生了。请忽略不支持不连续选择。错误，因为这是最新版本编辑器已经解决的问题。

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

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

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

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

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

Answer 1

此问题已在版本0.5.2上得到解决。所有这些，包括＆＃39; Discontiguous选项都不受支持。＆＃39;

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