Wie füge ich mithilfe von JavaScript HTML an der Cursorposition in ein inhaltsbearbeitbares Div ein?

HTML am Cursor in ein inhaltsbearbeitbares Div einfügen

Bei der Arbeit mit einem inhaltsbearbeitbaren Div ist es oft notwendig, HTML am Cursor einzufügen Position. Dies kann mithilfe von JavaScript erfolgen, um das Tastendruckereignis zu erfassen und das Standardverhalten der Eingabetaste zu verhindern.

Um HTML einzufügen, können wir die Methode insertNode() des Range-Objekts verwenden. Mit dieser Methode können wir einen Knoten an einer bestimmten Stelle in das DOM einfügen. In den meisten Browsern, außer IE < 9 können wir diese Methode direkt verwenden.

Hier ist eine Funktion, die zeigt, wie man HTML an der Cursorposition in allen gängigen Browsern einfügt, unabhängig davon, ob der Inhalt ausgewählt ist oder nicht:

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();

            // Create a document fragment to hold the HTML
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }

            // Insert the HTML into the document
            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();
        }
    }
}

In IE < 9 können wir die Methode pasteHTML() des Range-Objekts verwenden, um HTML einzufügen.

Diese Methode ist flexibler, da sie es uns ermöglicht anzugeben, ob wir den eingefügten Inhalt auswählen möchten oder nicht.

Um diese Funktion aufzurufen, übergeben Sie einfach den HTML-Code, den Sie einfügen möchten, und einen booleschen Wert, um anzugeben, ob der eingefügte Inhalt ausgewählt werden soll oder nicht.

Zum Beispiel:

pasteHtmlAtCaret('<p>New HTML</p>', true);<p></p><p>Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von JavaScript HTML an der Cursorposition in ein inhaltsbearbeitbares Div ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p>