31

I 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?

alex
  • 479,566
  • 201
  • 878
  • 984
Tattat
  • 15,548
  • 33
  • 87
  • 138

6 Answers6

25

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
phihag
  • 278,196
  • 72
  • 453
  • 469
  • 1
    do you really think contentEditable will give you all for free? and anyway that is html5 – Anurag Uniyal Dec 05 '10 at 13:22
  • 5
    @AnuragUniyal contentEditable has been introduced way back in IE5.5, Mozilla added first support for it at the end of 2002 https://bugzilla.mozilla.org/show_bug.cgi?id=97284#c162 – Ivo Wetzel Dec 05 '10 at 13:27
  • AnuragUniyal is correct. contentEditable has little to nothing to do with this and the only sensible answer is by Gabriel Mazetto. – Rob Dec 11 '11 at 00:15
  • @Rob Updated. If you're writing your own WYSIWIG editor, starting with `contentEditable` is a very good idea and will already give you most of what you need. google's solution just works for really complicated, large-scale projects. – phihag Dec 11 '11 at 01:14
18

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)

Gabriel Mazetto
  • 1,090
  • 1
  • 12
  • 23
  • 3
    If all the computation is done locally, does that mean we can peer inside to see how their code works? Or is a lot still being handled server side? – Joseph Dec 13 '13 at 17:57
  • All the computation related to "capture what is being typed" to the code needed to render and display things are locally, but the real important code is on the server side (that handles everything from broadcasting whats being typed, persistence, collision control and the actual "microsoft file format". While it's true that good part of the code is on the client side, remember that it's obfuscated and also it's a proprietary code... – Gabriel Mazetto Jan 22 '14 at 16:16
11

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.

Raman
  • 17,606
  • 5
  • 95
  • 112
11

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.

12345
  • 565
  • 7
  • 12
2

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.

Pete Kirkham
  • 48,893
  • 5
  • 92
  • 171
-7
<!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>
Senthil
  • 1