Wie füge ich HTML an der Caret-Position in ein inhaltsbearbeitbares DIV ein?

Einfügen von HTML in ein inhaltsbearbeitbares DIV an der Caret-Position

Herausforderung:

In einem inhaltsbearbeitbaren Div werden Tastendruckereignisse erfasst kann verwendet werden, um die Eingabe von Text zu verhindern, wenn die Eingabetaste gedrückt wird. Mit dem Cursor an der gewünschten Einfügemarke suchen wir nach einer Methode, um HTML (z. B. ein
-Tag) einzufügen, ohne dass es als Klartext angezeigt wird.

Lösung:

Während die Verwendung von Range.pasteHTML() im IE funktioniert, zeigen andere Browser das HTML-Tag als Text an. Mit der folgenden Funktion können wir HTML in alle gängigen Browser einfügen und bei Auswahl vorhandenen Text ersetzen:

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

Erweiterte Funktionalität (August 2013):

Als Antwort auf Auf Benutzerwunsch wurde ein zusätzlicher Parameter hinzugefügt, der angibt, ob der eingefügte Inhalt ausgewählt werden soll oder nicht.

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

Mit dieser aktualisierten Funktion können wir das Auswahlverhalten nach dem Einfügen von HTML-Inhalten steuern.

Das obige ist der detaillierte Inhalt vonWie füge ich HTML an der Caret-Position in ein inhaltsbearbeitbares DIV ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!