Einfügen als nur-text Contenteditable div & textarea (word/excel...)
Ich möchte das einfügen von text in eine contenteditable div, sondern reagiert wie eine textarea.
Beachten Sie, dass ich will, dass die Formatierung als würde ich fügen Sie es in mein textarea (aus word, excel,...).
So.
1) Fügen Sie den text in contenteditable div
2) ich bekomme den text aus der Zwischenablage
3) Schiebe ich meinen Wert aus Zwischenablage in meine textarea, (ich weiß nicht wie??)
4) Holen Sie sich Wert von meinem textarea und platzieren Sie es in meine contenteditable div
Irgendwelche Vorschläge?
- Siehe stackoverflow.com/questions/2176861/....
- Das problem ist nicht immer die Daten, die ich bereits verwendet seine Methode zu erhalten, meine Daten aus meiner Zwischenablage. Aber die Verwendung meiner Daten in der Zwischenablage auf "einfügen" in meine textarea, dort ist mein problem
- Sie können dies nur tun, durch die Konzentration der textarea und welche den browser einfügen in die es während der ein paste-Ereignis.
- In der Tat, vielen Dank dafür, derzeit kann ich es machen das arbeiten mit Tastatur-Ereignisse, suchen tiefer zu finden, auch als Lösung, wenn einfügen auf klicken Sie auf Veranstaltungen
- In einigen Browsern ist es einfach nicht möglich ist. Die
paste
Ereignis ist einfach zu spät, um die Umleitung des Fokus. - Fand ich ein workaround: mattbenton.net/2012/01/jquery-plugin-paste-events, Aber es scheint nicht zu funktionieren im IE/FF, wenn ich meinen Fokus auf prepaste und postpaste, arbeitet SAF
- Das plug-in ist immer noch mit der paste-Ereignis und leider behebt nichts.
- nicht gibt es einen workaround um das zu beheben?
- Nicht, dass ich denken kann. Der erste, der laufende JavaScript in die Seite kennt ein einfügen aus dem Kontextmenü oder im Menü Bearbeiten ist, wenn die
paste
event feuert. Einige Browser tun das Feuer einbeforepaste
Veranstaltung aber es ist nicht generell sinnvoll.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin CKEditor core developer und durch Zufall für die letzten 4 Monate die ich arbeiten war die Unterstützung der Zwischenablage und Verwandte Sachen 🙂 Leider bin ich nicht in der Lage sein, beschreiben Sie die gesamte Art und Weise, wie das einfügen gehandhabt wird, weil die Geschichten der impl sind zu schwierig für mich, auch nach dem schreiben impl von mir selbst 😀
Allerdings, hier sind einige Tipps, die dir helfen kann:
Nicht schreiben wysiwyg-editor - verwenden Sie eine, die existiert. Es wird verbrauchen Sie all Ihre Zeit und noch Ihren editor buggy. Wir und die Jungs von anderen... beiden wichtigsten Editoren (erraten, warum nur drei vorhanden sind) arbeiten, dies seit Jahren und wir haben immer noch voller bugs Listen ;).
Wenn Sie wirklich brauchen, zu schreiben, Ihre eigenen editor-check-out http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js - es ist die alte impl, bevor ich schrieb es, aber es funktioniert überall, wo es möglich ist. Der code ist schrecklich... aber es kann dir helfen.
Ihnen nicht möglich sein, um alle Browser durch nur ein Ereignis
paste
. Um alle Möglichkeiten von einfügen verwenden wir beide -beforepaste
undpaste
.Gibt es Zahl (große Zahl :D) der Browser, die' Macken, die Sie benötigen, um zu behandeln. Ich kann nicht beschreiben, man Ihnen, denn auch nach paar Wochen ich erinnere mich nicht, alle von Ihnen. Jedoch kleiner Auszug aus unserer docs kann nützlich sein für Sie:
Einfügen-Befehl (nicht-native einfügen - z.B. von unserem Symbolleiste)
Einfügen von nativen Kontext-Menü & menubar
Den rest des trick - Auf IEs-wir hören auf beide Ereignisse einfügen, den rest nur für
paste
. Wir müssen verhindern, dass einige Ereignisse auf IE, weil da sind wir empfangsbereit für beide manchmal kann dies Ursache verdoppelt Handhabung. Dies ist der schwierigste Teil, denke ich.Welche Teile der Formatierung, die Sie wollen zu halten? Textarea halten nur die grundlegenden - Blöcke formatieren.
Sehen http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 bis zur Linie 123 - dies ist der Letzte Teil der Aufgabe - einfügen von Inhalt in eine Auswahl.
Aktuelle Lösung funktioniert perfekt im IE/SAF/FF
Aber trotzdem brauche ich eine Lösung für "nicht" keyboard-events, beim einfügen mit der Maus klicken...
Aktuelle Lösung für die Tastatur - "einfügen" - Veranstaltungen:
Ich habe das erreicht mit feingliedrige Bibliothek zum speichern und wiederherstellen von Selektionen.
Ich auch einige andere arbeiten mit der Bibliothek in den gleichen Funktionen, die ich entfernt von diesem Beispiel, so ist dies nicht optimalen code.
HTML
Javascript