Editable DOM in HTML, like Google Docs

I'm a little curious about how the editing of Google Docs works. How did they implement an editor within the DOM? It does not really looks like a form with a textarea, but rather a normal document body with an additional cursor. I guess it is some javascript technique behind.

Is there any free library 开发者_JS百科that I can use for achieving this kind of functionality, or how can I implement it myself?

2019 Update

I'm pretty certain the answer below was accurate at time of writing in 2010 but has been substantially inaccurate for several years. Here's an answer of mine to a similar question in 2012 that may be more accurate, although still possibly not massively helpful.

How does Google Docs achieve content editing?

Original answer

It uses editing functionality built into all modern desktop browsers, accessed at document level via setting the designMode property of the document to "on", or at an element level by adding a contenteditable attribute with value "true" (also triggered by setting the contentEditable property of an element to the string "true").

A very common strategy for editing a piece of content in a web page is to include an iframe whose document has designMode turned on.

Coupled with this is document.execCommand, which in an editable document can be used to apply various kinds of formatting. For example:

 document.execCommand("bold", false, null);

... will toggle whether the selected text is bold. There is a pool of common commands between browsers but there are some discrepancies as to exactly how some are implemented. More info can be found here at MSDN for IE and here at MDC for Firefox. Can't seem to find documentation for WebKit.

Since mid-2010 Google Docs seems to completely having switched away from relying on the browser for editing mode.

Instead they built their own text/HTML editor using JavaScript and DOM.

They explain it in a lengthy blog posting on how they implemented the functions.

Having searched for 3rd-party vendors offering similar concepts, I found no one so far. Would have been a great for iOS since they seem to not support the contentEditable attribute until iOS 5 (and even then, there are issues)

For mee it looks like any HTML editor. They just coded their own JavaScript HTML editor. Even the HTML edit view doesn't have any magic.

A good and free HTML editor is TinyMCE but there are many others out there, even some very powerfull proprietary like CuteEditor which is available for PHP and ASP.NET.

BTW: The content of the document (in Google Docs) is placed in an iframe, just as it is in CuteEditor (and probably also in TinyMCE).

As other people have said, google is very uptight about what information they share. However, they have posted a lengthy blog idea about how they built their own word processing system FROM SCRATCH. Building this, would require you to have your own experience team with several days needed to complete it. Link to lengthy blog is here: https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html

Essentially, they capture where your cursor is, place a div that looks like a line, and manually insert a letter at the place your cursor is