Besides the new Google Docs, all the other WYSIWYG web-based rich text editors (ckeditor, tinymce, old Google Docs) I've seen are based on contenteditable or designMode. I personally hate using these editors. It doesn't take much formatting or copying/pasting before the whole experience turns into an exercise in frustration. Returns suddenly start getting double-spaced, unintended formatting gets introduced via pasting from other HTML sources, undo's/redo's are completely broken, formatting becomes excruciatingly difficult to control, etc.
I believe this is one of the reasons Google Docs introduced its own much more constrained, non-HTML formatting engine. Is there any open-source library out there that provides something similar? Thanks in advance.
You could start with the Ace editor (formerly Bespin and Skywriter). It's aimed at code editing, so it's missing formatting and other features, but you may find a useful core of functionality to base a rich text editor on.
In action: http://ajaxorg.github.com/ace/build/editor.html
Code: https://github.com/ajaxorg/ace
Update: As @theazureshadow points out, the current editor doesn't use canvas
as I originally reported. Bespin used canvas
before it merged with Ace, which uses the DOM. Peeking briefly under the hood, it doesn't appear they are using contentEditable
or designMode
, though. (There's a <textarea />
that follows the cursor around and spans and divs to show the text - a bunch of custom JS to wire it all together, methinks.)
From ace.ajax.org > History:
Bespin started as part of Mozilla Labs and was based on the
<canvas>
tag, while Ace is the Editor component of the Cloud9 IDE and is using the DOM for rendering.