Comment insérer du HTML au niveau du curseur dans un Div ContentEditable ?

Insérer du HTML dans Caret dans un div contenteditable

Dans les divs contenteditable, la capture des frappes sur les touches vous permet d'empêcher l'insertion de caractères indésirables. Cela soulève la nécessité d'insérer directement des éléments HTML, tels qu'une balise
. Bien que la solution fournie pour l'insertion de texte dans un div contenteditable fonctionne dans IE en utilisant la méthode range.pasteHTML, elle restitue la balise
sous forme de texte brut dans d'autres navigateurs.

Insérer du HTML à l'aide de insertNode()

Dans la plupart des navigateurs, vous pouvez utiliser la méthode insertNode() de la Range obtenue à partir de la sélection pour insérer des nœuds HTML. Les versions d'IE inférieures à 9 prennent toujours en charge pasteHTML().

Fonction d'insertion de HTML

La fonction suivante peut être utilisée pour insérer du HTML au niveau du curseur dans tous les principaux navigateurs :

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    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, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteHTML(html);
  }
}

Mise à jour : sélection du contenu inséré

Pour les scénarios dans lesquels vous souhaitez sélectionner le contenu inséré après l'insertion, la fonction peut être mise à jour avec un paramètre supplémentaire comme illustré ci-dessous :

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Implementation with logic for selecting the inserted content if selectPastedContent is 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!