javascript - 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 中找到范围对象的任何规范。

如何让这段代码同时适用于 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。如果您需要，我可以提供解决方法。