Wie implementiert Google Text & Tabellen Rich Text Editing?

Question

Ich habe gerade den Abschnitt über Rich-Text-Bearbeitung in Browsern in Professional JavaScript für Web-Entwickler von Nicholas Zakas abgeschlossen. Er sagt, es gibt zwei Möglichkeiten, über die Implementierung von Rich-Text-Bearbeitung zu gehen:

1. iframe mit designMode Eigenschaft auf on
2. oder ein Element mit contenteditable Attribut

Was ich aus, dass Informationen abgeschlossen ist, dass Beide Techniken haben so viele browserübergreifende Inkonsistenzen, dass keine wirklich zuverlässige Lösung ist.

Bei der Überprüfung von Google Docs Markup ist alles, was ich sehe, eine Reihe verschachtelter div s.

Also, ich bin neugierig, welche Technik hat Google als am besten geeignet für die Implementierung von Rich-Text-Bearbeitung bestimmt?

Answer 1

Google Text & Tabellen verwenden weder designMode noch contentEditable. Es hat eine eigene Rendering-Engine in Javascript geschrieben. Aus ihrer blog post on it:

Um diese Probleme zu bekommen, wird das neue Google-Dokument-Editor nicht den Browser verwenden editierbaren Text zu behandeln. Wir haben eine brandneue Edit Oberfläche und Layout-Engine geschrieben, komplett in JavaScript.

und

Bei weitem das Schwierigste, was der Herausgeber tut, ist herauszufinden, wo Text zu zeichnen. Dafür haben wir eine neue Layout-Engine erstellt. Hier ist ein Beispiel dafür, wie die neue Engine funktioniert: Sie geben den Buchstaben "a" ein. Wir bemerken, dass Sie die Taste 'a' gedrückt haben und reagieren, indem Sie ein einzelnes 'a' außerhalb des Bildschirms zeichnen. Wir messen dann die Breite und Höhe dieses "a", kombinieren diese Messungen mit der x- und y-Position Ihres Cursors und platzieren das "a" an der richtigen Stelle auf dem Bildschirm. Wenn Sie in der Mitte eines Wortes sind, drücken wir die Zeichen nach dem Cursor über. Wenn Sie sich am Ende einer Zeile befinden, verschiebt der Editor Ihr Wort in die nächste Zeile und drückt einen Überlauf auf die Zeilen dahinter.