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问题跟踪器的项目。

它可能与此编辑器的在兴基库上打开的问题有关。

我无法在Firefox37.0.2上复制错误，这使我认为它不会发生在Firefox上。

谢谢你的帮助。

Answer 1

此问题已在版本0.5.2上得到解决。所有这些，包括“不连续的选择是不支持的”。

非常感谢@oliver指出了对GitHub 问题的解决方案。