How to implement Google doc like text editor? [closed]
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this questionI opened a google doc, it seems that the google doc is not a simple text area .... it seems that this is a customize stuff.... is there any library for doing that kind of things?
Most editors use the contentEditable property. Simply setting it on any HTML element enables editing, copy&paste, spell checking, formatting etc. in modern user agents.
However, google docs specifically does not use contentEditable. Instead, they implemented their own rendering engine in JavaScript. Unless you plan a project on the scale of google docs (i.e. you have at least, say, 3 people willing to work full-time on the rendering engine), contentEditable is the way to go.
new Google Docs is totally 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
quoted from the article: “To get around these problems, the new Google document editor doesn’t use the browser to handle editable text. We wrote a brand new editing surface and layout engine, entirely in JavaScript,” Jeff Harris, product manager, Google Docs.
It's amazing how there isn't any open source implementation and people are not aware of this.
The short answer is that they implemented every single logic that a graphic text editor would do, in plain javascript (from layout, to rendering, to everything else)
Google Wave pioneered much of what google docs has, though the models are completely different. Start research there, as there is much to learn.
If you are just trying to do something simpler than structured documents, mobwrite, etherpad or one of its forks could suit.
The editor can be tricky and essentially involves building an entire word processor in javascript. Some examples of this are around.
With any kind of editor you have a line or element buffer, which you must mirror onto the realtime api of choice.
This can be done with Google drive's realtime API.
Modification events have to be handled in both directions. Local model changes propagating to the realtime model and vice versa. Modifications to the local model can get rendered as they happen.
Cursors can be handled by having pointers on the source buffer, such as Index Reference.
The server can be implemented in a number of ways, but will require an operational transformation model supporting common structures. Wave protocol's site has an example using an xml model.
Ritzy is a new open source rich text editor that contains a custom javascript surface and layout engine just like Google Docs. Take a look at it's source for some ideas.
It is based on Facebook React and SwarmJS and is primarily intended for embedding into applications to support rich text entry with real-time collaboration.
As far as I know, this is the first open source implementation of this technique. Note that this is pretty new and hasn't seen any real-world testing/usage, so there are some known bugs and likely lots of unknown ones as well.
Disclaimer: I am the author of the above-mentioned project.
If you use the element inspector (Tools>Developer Tools on chrome, or the Firebug extension for Firefox) then you can see what techniques they used to implement it.
How you implement it is the same as anything - break up the tasks into small enough units that you can understand each one, understand how the units act in concert to realise the system, then implement the units and put them together.
<!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>
加载中,请稍侯......
精彩评论