如何使用 webkit 浏览器选择范围内的节点？

Question

我目前正在研究 WYSIWYG 解决方案，需要一个函数来正确选择一个节点的范围（我指的是节点本身，而不仅仅是它的内容）

DOM lvl2 显然有这个w3.org/ranges 的功能并定义它

range.selectNodeContents() // Select the contents within a node
和
range.selectNode() //Select a node and its contents

问题是，当 selectNode() 完美地与 Firefox 甚至 ie9 一起工作时，似乎不可能用任何 Webkit 浏览器（最后是 Chrome 和 Safari）来实现。在 Webkit 上 selectNodeContents() 和 selectNode() 都只选择节点内容（根据规范，这在我看来是一个错误）

为了使它工作，我尝试使用
range.setStartBefore(node);
range.setEndAfter(node);
来模拟 selectNode() 目标 但结果还是一样，它在任何地方都可以工作（当然是>8），但不能在 webkit 浏览器上工作..

如果你想尝试一下，我做了一个小 jsfiddle，你可以用它玩 here（只需打开控制台并查看 console.warn 结果，这在 webkit 上是不一样的：/）

我搜索了很多，但找不到在 webkit 浏览器上实际选择完整节点的方法。 奇迹般地，你们中的一些人会知道一种方法，甚至只是任何提示来继续我的探索吗？ ：/

ps：我知道“rangy”库，但我不能在我的项目中使用它，而且从我在源代码中读到的内容来看，我什至不确定他们是否处理那个东西：/

Answer 1

问题不在于selectNode()，它在 WebKit 中运行良好，而在于 WebKit 的选择对象，它破坏范围以适应其自己（并非总是不合理）允许选择边界和插入符号位置的想法. WebKit 对此有一些错误：

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

你说得对，Rangy 并没有处理这个问题，而是更愿意反映浏览器原生选择的现实。假装选择不同会很快导致奇怪的行为。