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

HTML am Cursor in ein inhaltsbearbeitbares Div einfügen

Wenn Sie mit einem Div arbeiten, das eine Bearbeitung ermöglicht, möchten Sie möglicherweise HTML direkt am einfügen den Cursor. Während Methoden wie insertText() einfachen Text hinzufügen können, zeigen Browser auf diese Weise eingefügtes HTML normalerweise als Text an, anstatt es auszuführen.

Um diese Einschränkung zu überwinden, ist ein ausgefeilterer Ansatz erforderlich. Eine Lösung besteht darin, die Methode insertNode() des Range-Objekts zu nutzen. IE8 und niedriger basieren jedoch auf pasteHTML().

Implementierung

Die folgende Funktion übernimmt das Einfügen von HTML in allen gängigen Browsern:

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

Verbesserung

Basierend auf Benutzeranfragen wurde eine aktualisierte Version mit einem zusätzlichen Parameter erstellt entwickelt:

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

Wenn dieser Parameter auf „true“ gesetzt ist, können Sie den eingefügten Inhalt bei der Ausführung auswählen.

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