Comment insérer du HTML à la position du curseur dans un div contenteditable à l'aide de JavaScript ?

Insérer du HTML au niveau du curseur dans un div contenteditable

Lorsque vous travaillez avec un div contenteditable, il est souvent nécessaire d'insérer du HTML au niveau du curseur position. Cela peut être fait en utilisant JavaScript pour capturer l'événement keypress et empêcher le comportement par défaut de la touche entrée.

Pour insérer du HTML, nous pouvons utiliser la méthode insertNode() de l'objet Range. Cette méthode nous permet d'insérer un nœud dans le DOM à un emplacement spécifié. Dans la plupart des navigateurs, à l'exception d'IE < 9, nous pouvons utiliser cette méthode directement.

Voici une fonction qui montre comment insérer du HTML à la position du curseur dans tous les principaux navigateurs, que le contenu soit sélectionné ou non :

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

Dans IE ≪ 9, nous pouvons utiliser la méthode pasteHTML() de l'objet Range pour insérer du HTML.

Cette méthode est plus flexible, car elle nous permet de spécifier si nous voulons sélectionner ou non le contenu inséré.

Pour appeler cette fonction, transmettez simplement le code HTML que vous souhaitez insérer et une valeur booléenne pour indiquer s'il faut ou non sélectionner le contenu inséré.

Par exemple :

pasteHtmlAtCaret('
New HTML
', true);
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!