Fügen Sie HTML in caret in einem contenteditable div ein

In den meisten Browsern, die Sie verwenden können, die insertNode() - Methode des Range-Sie erhalten aus der Auswahl. Im IE < 9 können Sie pasteHTML(), wie Sie bereits erwähnt. Unten ist eine Funktion, um dies zu tun, die in allen gängigen Browsern. Wenn content ist bereits markiert ist, wird es ersetzt, so ist dies effektiv eine einfügen-operation. Auch habe ich einen code Hinzugefügt, um platzieren Sie die Einfügemarke nach dem Ende der eingefügten Inhalte.

jsFiddle: http://jsfiddle.net/jwvha/1/

Code:

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
            //only relatively recently standardized and is not supported in
            //some 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);
    }
}

UPDATE 21. AUGUST 2013

Wie gewünscht in den Kommentaren, hier ist ein Aktuelles Beispiel mit einem zusätzlichen parameter, der angibt, ob oder ob nicht, wählen Sie den eingefügten Inhalt.

Demo: http://jsfiddle.net/timdown/jwvha/527/

Code:

function pasteHtmlAtCaret(html, selectPastedContent) {
    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
            //only relatively recently standardized and is not supported in
            //some 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);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);

            //Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        //IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

InformationsquelleAutor der Antwort Tim Down

var r = getSelection().getRangeAt(0);
r.insertNode(r.createContextualFragment('<b>Hello</b>'));

//select this range
getSelection().removeAllRanges();
getSelection().addRange(r);
//collapse to end/start 
getSelection().collapseToEnd() 

InformationsquelleAutor der Antwort Alex G