Question

我使用了很棒的Rangy library。我也使用Tim Down的功能将HTML节点插入到可信的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”键按下后的下一个打字字母是黑色 - 不想要）

感谢您提供任何帮助和提示。

Answer 1

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

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

请参阅http://jsfiddle.net/Er5DH/6/

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

1 个答案: