Text in Javascript einfügen contenteditable div

Question

Ich habe ein Problem, wo ich einen Text einfügen muss (Zeichenfolge, möglicherweise oder möglicherweise nicht HTML-Tags) zu einem div. Es muss ein div und kein textarea sein.

Gibt es das überhaupt zu tun? Zuallererst muss ich die Cursorposition ermitteln und den Text an dieser Stelle einfügen.

Es ähnelt der Funktion insertAdjacentText, aber es kann nur vor oder nach einem Tag eingefügt werden und funktioniert nur in IE.

Siehe URL: http://yart.com.au/test/iframe.aspx. Beachten Sie, wie Sie den Cursor im div platzieren können, wir müssen Text an der Cursorposition hinzufügen.

Answer 1

Der Range und Auswahlobjekte

Verwenden Sie die selection und range objects. Diese enthalten alle Arten von Informationen über die aktuelle Auswahl und wo sie innerhalb der Knotenstruktur liegen.

Fair Warning: Es ist nicht ganz unmöglich, zu tun, was Sie beschreiben, aber wenn man sehr extravagant bekommen, werden Sie in ziemlich tiefem Wasser von Browser Macken und Inkompatibilitäten sein. Sie werden eine Menge von Objekterkennung tun müssen, um sicherzustellen, dass Sie konsistente Werte und Methoden haben. Inkrementell überprüfen Sie alle Ihre Browser während der Entwicklung. Viel Glück!

Answer 2

Wenn Sie nur HTML an der aktuellen Auswahl/Einfügeposition einfügen müssen, ist dies möglich. Aus der Spitze meines Kopfes (um loszulegen):

In IE verwenden Sie document.selection.createRange(). PasteHTML (theNewHTML).

In anderen Browsern sollten Sie in der Lage sein, document.execommand ("InsertHTML", ...) zu verwenden.

Ich habe diese Arten von Techniken nur in bearbeitbare iframes/Dokumente, nicht Divs, aber diese Anrufe sollten funktionieren, wenn das div konzentriert ist, glaube ich.

Wie eine andere Antwort warnte, wird es hässlich, wenn Sie feinere Kontrolle, wie Einfügen von Text an anderen Orten wollen.

Answer 3

Sie können auch eine Round-About-Methode mit insertImage verwenden. Sie fügen ein gefälschtes Bild (oder ein kleines) mit dem execCommand "insertImage" ein, dann verwenden Sie Javascript, um innerHTML zu ersetzen, um den Text hinzuzufügen.

Zum Beispiel:

iFrame.focus() 
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg") 
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!") 

Während iFrame ist gleich der ID des beabsichtigten iFrame. Oder Sie könnten einen DIV-Layer verwenden, indem Sie document.getElementById ("IDofDIVlayer") verwenden. InnerHTML

Achten Sie darauf, vor dem Aufruf des execCommand zu konzentrieren, sonst funktioniert es möglicherweise nicht in IE.

Diese Methode funktioniert auch in IE. Geprüft.

Answer 4

Hier ein browserübergreifendes Beispiel, angepasst von this answer, um mit iframes zu arbeiten.

function pasteHtmlAtCaret(html, selectPastedContent, iframe) { 
    var sel, range; 
    var win = iframe ? iframe.contentWindow : window; 
    var doc = win.document; 
    if (win.getSelection) { 
     // IE9 and non-IE 
     sel = win.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 

      // Range.createContextualFragment() would be useful here but is 
      // only relatively recently standardized and is not supported in 
      // some browsers (IE9, for one) 
      var el = doc.createElement("div"); 
      el.innerHTML = html; 
      var frag = doc.createDocumentFragment(), node, lastNode; 
      while ((node = el.firstChild)) { 
       lastNode = frag.appendChild(node); 
      } 
      var firstNode = frag.firstChild; 
      range.insertNode(frag); 

      // Preserve the selection 
      if (lastNode) { 
       range = range.cloneRange(); 
       range.setStartAfter(lastNode); 
       if (selectPastedContent) { 
        range.setStartBefore(firstNode); 
       } else { 
        range.collapse(true); 
       } 
       sel.removeAllRanges(); 
       sel.addRange(range); 
      } 
     } 
    } else if ((sel = doc.selection) && sel.type != "Control") { 
     // IE < 9 
     var originalRange = sel.createRange(); 
     originalRange.collapse(true); 
     sel.createRange().pasteHTML(html); 
     if (selectPastedContent) { 
      range = sel.createRange(); 
      range.setEndPoint("StartToStart", originalRange); 
      range.select(); 
     } 
    } 
}