Wie füge ich HTML am Caret-Zeichen in ein ContentEditable-Div ein?

Html bei Caret in ein inhaltsbearbeitbares Div einfügen

In inhaltsbearbeitbaren Divs können Sie durch die Erfassung von Tastendrücken das Einfügen unerwünschter Zeichen verhindern. Dies erhöht die Anforderung, HTML-Elemente, wie beispielsweise ein
-Tag, direkt einzufügen. Während die bereitgestellte Lösung zum Einfügen von Text in ein inhaltsbearbeitbares Div im IE mit der Methode „range.pasteHTML“ funktioniert, stellt sie das Tag
in anderen Browsern als einfachen Text dar.

HTML mit insertNode() einfügen

In den meisten Browsern können Sie die Methode insertNode() des aus der Auswahl erhaltenen Bereichs verwenden, um HTML-Knoten einzufügen. IE-Versionen unter 9 unterstützen weiterhin pasteHTML().

Funktion zum Einfügen von HTML

Die folgende Funktion kann verwendet werden, um HTML an der Einfügemarke in allen gängigen Browsern einzufügen:

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

Update: Eingefügten Inhalt auswählen

Für Szenarien, in denen Sie den eingefügten Inhalt nach dem Einfügen auswählen möchten, kann die Funktion mit einem zusätzlichen Parameter aktualisiert werden, wie unten gezeigt :

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Implementation with logic for selecting the inserted content if selectPastedContent is true
}

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