使用 JavaScript Rangy 在 Chrome 中的空节点之前插入节点答案

【问题标题】：Inserting node before empty node in Chrome using JavaScript Rangy使用 JavaScript Rangy 在 Chrome 中的空节点之前插入节点
【发布时间】：2012-05-29 15:28:00
【问题描述】：

当尝试在另一个元素的开头（管道 | 是插入符号位置）的空元素之前插入一个节点时，我注意到了这个问题。从这个开始：

<p>|<span />Some text</p>

我在 Rangy 范围上使用 range.insertNode() 来粘贴一些文本，但在 Chrome 中我看到了这个结果，新节点出现在空的  之后：

<p><span />|INSERTED TEXTSome text</p>

而不是这样：

<p>|INSERTED TEXT<span />Some text</p>

请注意，这在 IE9 中似乎可以正常工作，如果插入未在  节点的开头完成，它也可以在 Chrome 中工作，例如：

<p>Some |<span />text</p>

结果：

<p>Some |INSERTED TEXT<span />text</p>

这是一个简化的示例，但显示了我遇到的问题。

为了澄清（如果我以错误的方式处理这个问题，有人可以提出替代方案）我正在尝试插入文本，并且一旦插入完成，光标总是出现在新插入文本的末尾。

例如|Original Text 应该变成 INSERTED TEXT|Original Text

但是，插入节点会导致插入符号紧接在插入的文本之前（正如文档所述，它应该用于插入节点，因此没有抱怨）。我正在尝试使用空的 作为标记来在插入后恢复插入符号的位置（实际上我正在使用 Rangy 的选择保存和恢复模块来为我做这件事）。

【问题讨论】：

标签： javascript html dom rangy

【解决方案1】：

这是因为 WebKit 不认为  之前的位置是有效的插入符号位置。它与这些 Webkit 错误有关：

如果范围符合您的预期，Rangy 将允许您将节点插入您想要的位置，但如果您从选择中获得了范围，那么该范围将反映浏览器对选择的想法。可能有办法解决它，但我不太清楚你到底想做什么。

【讨论】：

用一些澄清更新了我的问题。我想我理解你所说的范围 - 我正在从选择中获取范围。有没有一种简单的方法可以问 Rangy '你实际上是在保存/恢复标记之后什么时候应该在它之前'？
@Jason：有多种方法可以做到这一点。在我看来，您不需要保存和恢复步骤，只需执行 var node = document.createTextNode("INSERTED TEXT"); var sel = rangy.getSelection(); sel.getRangeAt(0).insertNode(node); sel.collapse(node, node.length); 之类的操作
啊，是的，这似乎是要走的路。我在实际实现中增加了一些复杂性，因为插入的“文本”实际上可能是 html，即“第 1 行
第 2 行”。起初我不认为这会是个问题，但现在我明白了。