html - javascript: Firefox での範囲選択の問題

Question

問題のFirefoxに直面しています。

次のコードを使用して、コンテンツ編集可能な div に「br」タグを挿入しようとしています。

このコードは、contenteditable div のキャレットに html を挿入するから取得したものです。

function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // non-standard and not supported in all browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
   }
}

この選択は、Firefox を除くすべてのブラウザーで正常に機能します。

Firefox では、キャレットは次の行ではなく現在の行の先頭に配置されます。しかし、入力を開始すると、期待どおりに文字が次の行に挿入されます。

次の行の先頭にキャレットを配置するには、ここで何をする必要がありますか?

迅速な検証のために、この jsfiddle http://jsfiddle.net/jwvha/378/を使用できます 。「br」タグを挿入するだけで、Firefox で言及している問題が表示されます。