Wie füge ich in allen Browsern HTML an der Cursorposition in ein ContentEditable-Div ein?

HTML an der Cursorposition in ein inhaltsbearbeitbares Div einfügen

Problemstellung

HTML einfügen, z. B.

Lösung

Um HTML direkt in andere Browser als IE einzufügen, verwenden Sie die Methode insertNode() des Range-Objekts:

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();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node;
            while (node = el.firstChild) {
                frag.appendChild(node);
            }
            range.insertNode(frag);
            range = range.cloneRange();
            range.setStartAfter(frag.lastChild);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Aktualisierte Lösung mit Option zur Auswahl eingefügter Inhalte

Optional können Sie den eingefügten Inhalt mithilfe eines zusätzlichen Parameters auswählen:

function pasteHtmlAtCaret(html, selectPastedContent) {
    // ... Original code ...
    var firstNode = frag.firstChild;
    range.insertNode(frag);
    if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        if (selectPastedContent) {
            range.setStartBefore(firstNode);
        } else {
            range.collapse(true);
        }
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // ... Original code ...
}

Dieser Code bietet browserübergreifende Kompatibilität zum Einfügen von HTML an der Cursorposition und bietet bei Bedarf die zusätzliche Flexibilität, den eingefügten Inhalt auszuwählen.

Das obige ist der detaillierte Inhalt vonWie füge ich in allen Browsern HTML an der Cursorposition in ein ContentEditable-Div ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!