webkit (Safari/Chrome) 中的选择范围

Question

我正在使用内容可编辑的 iframe 在 javascript 中创建语法高亮，其中最重要的事情之一就是能够正确缩进代码。

以下代码的工作方式与 Firefox 中的一样：

// Create one indent character
var range = window.getSelection().getRangeAt(0);
var newTextNode = document.createTextNode(Language.tabChar);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);

它创建一个制表符并将光标移动到字符的右侧。在 Chrome 和 Safari 中插入了一个字符，但光标不会移动到它的右侧。

我检查了 Chrome 和 Firefox 中的范围对象，然后注意到 Firefox 的范围对象比 Chrome 的要丰富得多。我一直无法在 webkit 中找到 range 对象的任何规格。

如何使这段代码同时适用于 webkit 和 Firefox？

谢谢！

Answer 1

Firefox 和 WebKit 的 Range 对象都完全符合 DOM Range spec。如果 Firefox 有更多属性，那么它们将是 Mozilla 自己的扩展，但通常规范会提供您可能需要的一切。

无论如何，问题是你需要在改变它之后重新选择范围：

// Create one indent character
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var newTextNode = document.createTextNode(Language.tabChar);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);
sel.removeAllRanges();
sel.addRange(range);

请注意，这在 Safari 的早期版本（我认为是版本 3 之前）中不起作用，因为它的选择对象不支持 getRangeAt。如果您需要，我可以提供一个解决方法。