Question

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.

Answer 1

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.