Question

I am using great Rangy library. And I am also using Tim Down’s function for inserting HTML node into 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);
    }
}

Now, this works fine and as expected in Chrome. However there is different behaviour in FF and Opera. In Chrome, the HTML node is inserted in contenteditable and the caret stays in this HTML node so when user continues typing, all his typing is inside inserted HTML node.

In Opera and Firefox, the caret is placed outside of inserted HTML node and when user continues typing, the typed characters are NOT inside HTML node.

My code expects “Chrome way” of working. Can you please help me to achieve the same behaviour in FF and Opera ?

Working jsFiddle for testing is here: http://jsfiddle.net/Er5DH/2/ (when you press “x” key in contenteditable, it inserts SPAN element with red color. In Chrome when you continue typing the characters are red, as expected. But in FF and Opera, the next typed letters after “x” key press are black – not wanted)

Thanks for any help and hints.

Answer 1

You could change range.collapseAfter(node) to

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

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