在 contenteditable 中使用 rangy 库和 insertNodeAtCaret 函数时的不同行为答案

【问题标题】：Different behaviour when using rangy library and insertNodeAtCaret function in contenteditable在 contenteditable 中使用 rangy 库和 insertNodeAtCaret 函数时的不同行为
【发布时间】：2012-05-26 07:33:44
【问题描述】：

我正在使用很棒的Rangy library。而且我还使用 Tim Down 的函数将 HTML 节点插入 contenteditable DIV：

function insertNodeAtCaret(node) {
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range.collapseAfter(node);
        sel.setSingleRange(range);
    }
}

现在，这在 Chrome 中可以正常工作并且符合预期。然而在 FF 和 Opera 中存在不同的行为。在 Chrome 中，HTML 节点插入到 contenteditable 中，插入符号保留在此 HTML 节点中，因此当用户继续输入时，他所有的输入都在插入的 HTML 节点中。

在 Opera 和 Firefox 中，插入符号位于插入的 HTML 节点之外，当用户继续输入时，输入的字符不在 HTML 节点内。

我的代码需要“Chrome 方式”的工作方式。你能帮我在 FF 和 Opera 中实现同样的行为吗？

用于测试的工作 jsFiddle 在这里：http://jsfiddle.net/Er5DH/2/（当您在 contenteditable 中按“x”键时，它会插入红色的 SPAN 元素。在 Chrome 中，当您继续输入字符时，如预期的那样，字符是红色的。但在 FF 和Opera，“x”键后的下一个输入字母是黑色的 - 不需要）

感谢任何帮助和提示。

【问题讨论】：

标签： javascript html cross-browser rangy

【解决方案1】：

您可以将range.collapseAfter(node) 更改为

range.selectNodeContents(node);
range.collapse(false);

见http://jsfiddle.net/Er5DH/6/

【讨论】：

Tim Down：感谢您的回答，但并没有完全解决问题。当我应用您提出的解决方案时，它在 Chrome 中被破坏并在 FF 中工作。我应该设置 IF 条件来过滤 FF/Opera 和 Chrome 吗？我想要更强大的解决方案，请问有可能吗？使用的最新代码 - jsfiddle.net/Er5DH/5
@Frodik：我犯了一个愚蠢的错误：应该是collapse(false) 而不是collapse(true)。我已经更新了我的答案。