Does a JavaScript layout engine for laying out text like that in Google Docs exist? I know Google Docs does some crazy things to get stuff to work (eschewing things like designMode and contentEditable pletely, with Microsoft Office Online doing quite a similar thing).

Does a JavaScript layout engine for laying out text like that in Google Docs exist? I know Google Docs does some crazy things to get stuff to work (eschewing things like designMode and contentEditable pletely, with Microsoft Office Online doing quite a similar thing).

• javascript
• layout
• text
• typography

• Don't know if it helps, but you can have a look at the Google Closure Editor package. – Felix Kling Commented Aug 12, 2011 at 11:11
• Google Closure Editor just seems to be the old, horrible designMode... – user193476 Commented Aug 12, 2011 at 11:20
• FWIW, in this demo, contenteditable is used. – Felix Kling Commented Aug 12, 2011 at 11:24

3 Answers 3

Neither of these are quite what you're looking for, though they might be good for specific purposes:

• Surface is "A building block for web-based text editors ... intended to be an extensible low-level interface for semantic rich text editing" from the folks at Surface.io

• The current state of the art for source-code editors is ACE

Ritzy is a new open source rich text editor that contains a custom javascript surface and layout engine just like Google Docs.

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.

When it es to editing, the following might help. For the "javascript layout engine", I'm still looking...

• rangyinputs:A small cross-browser JavaScript library for obtaining and manipulating selections within and HTML elements. Rangyinputs is currently available as a jQuery plugin.

• rangy: A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing mon DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer up to and including version 8 and DOM-pliant browsers. For manipulating selections in and elements, see Rangy's poorly-named and svelter twin project, Rangyinputs.