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

Insérer du HTML au niveau du curseur dans un Div ContentEditable

Lorsque vous travaillez avec un div qui permet l'édition, vous souhaiterez peut-être insérer du HTML directement à le curseur. Alors que des méthodes telles que insertText() peuvent ajouter du texte brut, les navigateurs affichent généralement le HTML inséré de cette manière sous forme de texte plutôt que de l'exécuter.

Pour surmonter cette limitation, une approche plus élaborée est nécessaire. Une solution consiste à exploiter la méthode insertNode() de l’objet Range. Cependant, IE8 et versions antérieures s'appuient sur pasteHTML().

Implémentation

La fonction suivante gère l'insertion HTML dans les principaux navigateurs :

function pasteHtmlAtCaret(html) {
  // Obtain the selection range
  var sel, range;
  if (window.getSelection) {
    // For non-IE browsers
    sel = window.getSelection();
    range = sel.getRangeAt(0);
  } else if (document.selection) {
    // For IE8 and below
    range = document.selection.createRange();
  }

  // Delete existing content in the range
  range.deleteContents();

  // Create an element to hold the HTML
  var el = document.createElement("div");
  el.innerHTML = html;
  
  // Create a fragment to insert
  var frag = document.createDocumentFragment();

  // Loop through elements in the div
  while ((node = el.firstChild)) {
    frag.appendChild(node);
  }
  
  // Insert the fragment into the range
  range.insertNode(frag);

  // Position the caret after the inserted content
  range = range.cloneRange();
  range.setStartAfter(frag.lastChild);
  range.collapse(true);
  if (sel) sel.removeAllRanges();
  if (sel) sel.addRange(range);
}

Amélioration

Sur la base des demandes des utilisateurs, une version mise à jour avec un paramètre supplémentaire a été développé :

function pasteHtmlAtCaret(html, selectPastedContent) {
  // ... (same as before)

  // Modify based on parameter
  if (selectPastedContent) {
    range.setStartBefore(frag.firstChild);
  } else {
    range.collapse(true);
  }

  // Update the selection
  sel.removeAllRanges();
  sel.addRange(range);
}

Lorsqu'il est défini sur true, ce paramètre vous permet de sélectionner le contenu inséré lors de l'exécution.

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!