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

Inserting node before empty node in Chrome using JavaScript Rangy

本文关键字：节点 插入 JavaScript Chrome Rangy      更新时间：2023-09-26

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

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

我在 Rangy 范围内使用 range.insertNode（） 来粘贴一些文本，但在 Chrome 中，我看到以下结果，新节点出现在空<span>之后：

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

而不是这个：

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

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

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

结果在：

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

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

为了澄清（如果我以错误的方式接近这一点，有人可以提出替代方案）我正在尝试插入文本，并在插入完成后始终将光标显示在新插入文本的末尾。

例如 <p>|Original Text</p>应该变得<p>INSERTED TEXT|Original Text</p>

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

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

  • https://bugs.webkit.org/show_bug.cgi?id=23189
  • https://bugs.webkit.org/show_bug.cgi?id=15256

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

相关文章：