Einfügen von text in Javascript contenteditable div
Ich habe ein problem, wo ich das einfügen muss einen text (string oder dürfen keine html-tags) in einen div. Es hat ein div und nicht eine textarea.
Ist es trotzdem, das zu tun? Zuerst von allen, die ich brauche, um die cursor-position, dann durch das einfügen von text in dieser position.
Es ist ähnlich wie die Funktion insertAdjacentText, aber es kann nur einfügen vor oder nach einem tag, und funktioniert nur im IE.
Finden Sie auf dieser URL: http://yart.com.au/test/iframe.aspx. Beachten Sie, wie Sie können, positionieren Sie den cursor in das div, müssen wir hinzufügen, text an der cursor-Position.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn alles, was Sie tun müssen, ist, legen Sie HTML-Code auf der aktuellen Auswahl /Einfügemarke, das ist machbar. Aus der Spitze von meinem Kopf (zum Einstieg):
Im IE, verwenden Sie document.Auswahl.createRange().pasteHTML(theNewHTML).
In anderen Browsern, sollten Sie in der Lage sein zu verwenden-Dokument.execCommand("InsertHTML", ...).
Ich habe diese Arten von Techniken, die nur in editierbare iframes/Dokumente, nicht auf divs, aber diese Anrufe funktionieren sollte, wenn das div-Element konzentriert, glaube ich.
Als eine weitere Antwort gewarnt, es wird hässlich, wenn Sie wollen, feiner abgestufte Kontrolle, wie das einfügen von text an anderen stellen.
Range-und Selection-Objekte
Verwenden Sie die Auswahl und range-Objekte. Diese enthalten alle Arten von Informationen über die aktuelle Auswahl, und wo es liegt innerhalb der node-Baum.
Faire Warnung:
Es ist nicht völlig unmöglich das zu tun, was Sie beschreiben, aber wenn Sie sehr schick, Sie werden in sehr tiefen Wasser der browser Macken und Inkompatibilitäten. Du gehst zu tun eine Menge Objekterkennung, überprüfung, um sicherzustellen, Sie haben beständige Werte und Methoden. Schrittweise prüfen alle Ihre Browser, wie Sie sich entwickeln. Viel Glück!
Hier ist ein cross-browser-Beispiel, adaptiert von diese Antwort arbeiten mit iframes.
Können Sie auch eine Runde über die Methode mit insertImage. Sie legen ein fake-Bild (oder eine kleine) mit dem execCommand "insertImage", dann verwenden Sie Javascript, um ersetzen Sie die innerHTML den text einfügen.
Beispiel:
In der Erwägung, dass der iFrame ist gleich der id des beabsichtigten iFrame. Oder, könntest du eine DIV-Ebene mit Dokument.getElementById("IDofDIVlayer").innerHTML
Sicher sein, zu konzentrieren, bevor Sie die execCommand, sonst kann es nicht im IE funktioniert.
Diese Methode funktioniert im IE auch. Getestet.