Legen Sie die caret-position in contenteditable div

Intro

Beim Bearbeiten der Inhalt einer contenteditable DOM-Objekt, verschiedene Browser haben unterschiedliche Verhaltensweisen. Zum Beispiel, Firefox 18.0 wird ein neuer Absatz erstellt (<p>) oder einen Zeilenumbruch <br/> in einigen Fällen, während Chrome 24 erstellt ein <div>.

Um das zu bewältigen, ich höre die DOMNodeInserted Veranstaltung und Austausch der neu eingefügten Knoten mit p-tags.

---

Problem

Das problem ist, platzieren Sie die Einfügemarke im Ort. Ich gelesen habe Tonnen von posts in SO in Bezug auf das gleiche Thema, aber keine der Antworten gearbeitet haben, zumindest in Chrome 24.

---

Code

JSFiddle

obj.addEventListener("DOMNodeInserted", onNodeInsert, false);

function onNodeInsert(e) {
    var range    = document.createRange(),
        sel      = window.getSelection(),
        newNode  = e.target,
        tagName  = newNode.tagName.toLowerCase(),
        lnbrNode = document.createElement('br'),
        pNode    = document.createElement('p');

    if (tagName === 'div' && newNode.getAttribute("id") === null) {
        //First we remove the event listener so that it doesn't get triggered again
        this.removeEventListener('DOMNodeInserted', onNodeInsert, false);

        //Creates a p node and removes the div
        newNode.parentNode.replaceChild(pNode, newNode);
        pNode.appendChild(lnbrNode);

        //Places the caret where it belongs
        range.setStart(pNode, 0);
        sel.removeAllRanges();
        sel.addRange(range);    

        //We can restore the event listener now
        this.addEventListener("DOMNodeInserted", onNodeInsert, false);
    }
}