Question

I thought it would be interesting to roll my own text editor a la Google Docs, purely for curiosity of course (nothing to do with reinventing the wheel). I’ve been wondering how applications like Docs and Zoho Writer can get advanced layout like separating text on different pages, or keeping headings together with their content, you know, things editors like TinyMCE or nicedit won’t do. I am aware of using designMode and contenteditable, and I’ve heard people using canvas, but is there a better way? How do desktop office suites like MS or LibreOffice manage that? Especially splitting the content into discrete pages while they are being edited?

On a side note, anyone aware of how the new Google Docs works? It doesn’t seem to use contenteditable (Zoho uses designMode), nor canvas. From what I found, it’s only a very deep hierarchy of <div>s.

Answer 1

Your ‘question’ is a little wide, but I will try to help you out a little bit:

Google Docs is using a hidden iframe (not display:none, is just that the user can’t actually see it) with a body with content editable (.docs-texteventtarget-iframe); when you see the caret blinking it means that the editable body is focused and everything you write there gets inserted in the DOM (after sanitizing special HTML characters)

Google Docs, like I said, is using DOM modification (not canvas or svg); even the caret is a little div blinking.

TinyMCE uses a similar technique but with an input field (instead of a content-editable body)