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

我正在使用内容可编辑的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);

它创建一个tab char并将光标移动到角色的右侧.在Chrome和Safari中插入了一个字符,但光标不会移动到它的右侧.

我检查了Chrome和Firefox中的范围对象,然后发现Firefox的范围对象比Chrome更丰富.我一直无法在webkit中找到范围对象的任何规范.

如何使这个代码适用于webkit和Firefox？

谢谢!

Firefox和WebKit的Range对象都完全符合DOM Range规范.如果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.如果需要,我可以提供一个解决方法.