Wie implementiert man Google Doc wie einen Texteditor? [closed]

Ich habe ein Google-Dokument geöffnet, es scheint, dass das Google-Dokument kein einfacher Textbereich ist … es scheint, dass dies ein benutzerdefiniertes Zeug ist … gibt es eine Bibliothek, um solche Dinge zu tun?

Die meisten Editoren verwenden die contentEditable Eigentum. Das einfache Setzen auf ein beliebiges HTML-Element ermöglicht das Bearbeiten, Kopieren und Einfügen, Rechtschreibprüfung, Formatierung usw. in modernen Benutzerprogrammen.

Google Docs tut dies jedoch ausdrücklich nicht Verwenden Sie contentEditable. Stattdessen haben sie umgesetzt ihre eigene Rendering-Engine in JavaScript. Sofern Sie kein Projekt in der Größenordnung von Google Docs planen (dh Sie haben mindestens, sagen wir, 3 Personen, die bereit sind, Vollzeit an der Rendering-Engine zu arbeiten), ist contentEditable der richtige Weg.

Das neue Google Docs ist für alles andere wie tinyMCE, ckEditor und ähnliches völlig anders. Hier ist ein Artikel, der einige der Technologien dahinter beschreibt: http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml

zitiert aus dem Artikel: „Um diese Probleme zu umgehen, verwendet der neue Google-Dokumenteditor den Browser nicht, um bearbeitbaren Text zu verarbeiten. Wir haben eine brandneue Bearbeitungsoberfläche und Layout-Engine geschrieben, komplett in JavaScript“, Jeff Harris, Produktmanager, Google Docs.

Es ist erstaunlich, dass es keine Open-Source-Implementierung gibt und die Leute sich dessen nicht bewusst sind.

Die kurze Antwort ist, dass sie jede einzelne Logik, die ein grafischer Texteditor ausführen würde, in einfachem Javascript implementiert haben (vom Layout über das Rendern bis hin zu allem anderen).

Google Wave hat viel von dem, was Google Docs hat, Pionierarbeit geleistet, obwohl die Modelle völlig unterschiedlich sind. Beginnen Sie dort mit der Forschung, denn es gibt viel zu lernen.

Wenn Sie nur versuchen, etwas Einfacheres als strukturierte Dokumente zu tun, könnten Mobwrite, Etherpad oder eine seiner Gabeln geeignet sein.

Der Editor kann knifflig sein und besteht im Wesentlichen darin, ein komplettes Textverarbeitungsprogramm in Javascript zu erstellen. Einige Beispiele dafür sind herum.

Bei jeder Art von Editor haben Sie einen Zeilen- oder Elementpuffer, den Sie auf die Echtzeit-API Ihrer Wahl spiegeln müssen.

Dies kann mit erfolgen Echtzeit-API von Google Drive.

Änderungsereignisse müssen in beide Richtungen behandelt werden. Lokale Modelländerungen, die sich auf das Echtzeitmodell ausbreiten und umgekehrt. Änderungen am lokalen Modell können sofort gerendert werden.

Cursor können gehandhabt werden, indem Zeiger auf den Quellpuffer vorhanden sind, wie z Index-Referenz.

Der Server kann auf verschiedene Weise implementiert werden, erfordert jedoch ein betriebliches Transformationsmodell, das gemeinsame Strukturen unterstützt. Website des Wave-Protokolls hat ein Beispiel mit einem XML-Modell.

Ritzy ist ein neuer Open-Source-Rich-Text-Editor, der eine benutzerdefinierte Javascript-Oberfläche und Layout-Engine enthält, genau wie Google Docs. Werfen Sie einen Blick auf die Quelle für einige Ideen.

Es basiert auf Facebook reagieren und SchwarmJS und ist in erster Linie für die Einbettung in Anwendungen vorgesehen, um die Rich-Text-Eingabe mit Zusammenarbeit in Echtzeit zu unterstützen.

Soweit ich weiß, ist dies die erste Open-Source-Implementierung dieser Technik. Beachten Sie, dass dies ziemlich neu ist und keine Tests/Verwendung in der realen Welt gesehen hat, also gibt es einige bekannte Fehler und wahrscheinlich auch viele unbekannte.

Haftungsausschluss: Ich bin der Autor des oben genannten Projekts.

Wenn Sie den Elementinspektor (Extras>Entwicklertools auf Chrome oder die Firebug-Erweiterung für Firefox) verwenden, können Sie sehen, welche Techniken sie verwendet, um es zu implementieren.

Wie Sie Implementieren ist das Gleiche wie alles andere – zerlegen Sie die Aufgaben in Einheiten, die klein genug sind, dass Sie jede einzelne verstehen können, verstehen Sie, wie die Einheiten zusammenarbeiten, um das System zu realisieren, implementieren Sie dann die Einheiten und setzen Sie sie zusammen.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>