Best IT Recipes

How to implement Google doc text editor?

I opened a google doc, it seems that the google doc is not just a text area ... it seems like it is custom stuff ... is there any library for this kind of thing?

+21
javascript html css
Dec 05 '10 at 13:01
source share
6 answers

Most editors use the contentEditable property. Just installing it on any HTML element allows you to edit, copy and paste, check spelling, formatting, etc. In modern user agents.

However, google docs does not specifically use contentEditable. Instead, they have implemented their own rendering engine in JavaScript. If you are not planning a project on the scale of Google documents (i.e. you have at least 3 people who want to work full time in the rendering engine), contentEditable is the way to go.

+17
Dec 05 '10 at 13:10
source share

The new Google Docs are completely different for everything else, like tinyMCE, ckEditor and similars. Here is an article describing some of the technologies behind it: http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml

cited in the article: “To get around these problems, the new Google Document Editor does not use a browser to edit editable text. We wrote a completely new surface for editing and layout, completely in JavaScript,” Jeff Harris, Product Manager, Google Docs.

It is amazing how there is no open source implementation, and people are not aware of this.

The short answer is that they implemented every logic that a graphical text editor would do in simple javascript (from layout, to rendering, to everything else).

+15
Nov 10 '11 at 16:38
source share

Google Wave first produced most of Google's documents, although the models are completely different. Begin research there, as there is much to learn.

If you are just trying to do something simpler than structured documents, you may need mobwrite, etherpad, or one of its forks.

An editor can be complex and essentially involves creating an entire word processor in javascript. Here are some examples of this.

With any editor, you have a line or element buffer that you should mirror in real time with the api of your choice.

This can be done using the real-time API for Google Drive .

Modification events should be handled in both directions. Changes to the local model apply to the real-time model and vice versa. Modifications to the local model may be displayed as they arise.

Cursors can be processed using pointers on the source buffer, such as Index Reference .

A server can be implemented in several ways, but this will require an operational transformation model that supports common structures. The Wave protocol site has an example using the xml model.

+10
Mar 08 '12 at 21:25
source share

Ritzy is a new open source text editor that contains a customizable JavaScript processing and layout engine, like Google Docs. Take a look at this source for some ideas.

It is based on Facebook React and SwarmJS and is primarily intended for implementation in applications support for advanced text input in real time.

As far as I know, this is the first implementation of this open source method. Please note that this is fairly new and there was no real testing / use in the real world, so there are some known errors and probably many unknowns.

Disclaimer I am the author of the above project.

+7
Aug 24 '15 at 10:22
source share

If you use the item inspector (Tools> Developer Tools for Chrome or the Firebug extension for Firefox), you can see what methods they used to implement it.

How you implement this is the same as everything - divide tasks into small enough units so that you can understand them, understand how the units act in concert to implement the system, and then implement the units and combine them.

+3
Dec 05 '10 at 13:19
source share
 <!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>
0
Jun 13 '17 at 6:51
source share


More articles:


All Articles