Comment insérer du HTML à la position du curseur dans un Div ContentEditable dans tous les navigateurs ?

Insérer du HTML à la position du curseur dans un Div ContentEditable

Énoncé du problème

Insérer du HTML, tel qu'un

Solution

Pour insérer du HTML directement dans des navigateurs autres que IE, utilisez la méthode insertNode() de Range object :

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

Solution mise à jour avec option de sélection du contenu collé

En option, vous pouvez sélectionner le contenu inséré à l'aide d'un paramètre supplémentaire :

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 ...
}

Ce code offre une compatibilité entre navigateurs pour l'insertion de HTML à la position du curseur, avec la flexibilité supplémentaire de sélectionner le contenu inséré si vous le souhaitez.

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!