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);

它创建一个tab char并将光标移动到角色的右侧。在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。如果您需要，我可以提供一个解决方法。

webkit中的选择范围（Safari / Chrome）

1 个答案: