Comment insérer du HTML dans un DIV modifiable à la position Caret ?

Insérer du HTML dans un DIV modifiable par le contenu à la position Caret

Défi :

Dans un div modifiable par le contenu, les événements de pression de touche capturent peut être utilisé pour empêcher la saisie de texte lorsque la touche Entrée est enfoncée. Avec le curseur dans le point d'insertion souhaité, nous recherchons une méthode pour insérer du HTML (par exemple, une balise
) sans l'afficher en texte brut.

Solution :

Bien que l'utilisation de Range.pasteHTML() fonctionne dans IE, d'autres navigateurs affichent la balise HTML sous forme de texte. La fonction suivante nous permet d'insérer du HTML dans tous les principaux navigateurs, en remplaçant le texte existant si elle est sélectionnée :

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

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

      range.insertNode(frag);

      // Preserve the selection after the inserted content
      if (frag.lastChild) {
        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);
  }
}

Fonctionnalité améliorée (août 2013) :

En réponse à demandes des utilisateurs, un paramètre supplémentaire a été ajouté pour préciser si le contenu inséré doit être sélectionné ou non.

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Similar functionality as the original function
  // ...
}

Cette fonction mise à jour nous permet de contrôler le comportement de sélection après l'insertion du contenu HTML.

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!