What is a good WYSIWYG editor to use with ContentEditable?

Question

I am trying to create something similar to Google Docs where you can edit the page directly, and not through a text box or iframe. This is possible with the contentEditable HTML5 attribute.

So, are there any good editors that I could use on top of contentEditable to provide features like formatting text, pasting links, pasting from a word, etc.?

http://www.aloha-editor.org/ is the one I found, but I was wondering if there are more.

(edit: I have to clarify that I'm not trying to create whole Google Docs, I just used this as an example of editing the actual content)

Answer 1

Version 2.0 of WYMeditor (currently under the intensive development of me and others) also uses contentEditable, but mainly depends on the choice / ranges / dom for manipulation as the behavior of designMode and contenteEditable API: s are very different between browser vendors.

Some of the design goals / objectives:

• Editing WYSIWYM . Separating content and presentation, we enable formatting of formatted text, but leave the presentation to the designer.

• Modular architecture . Use only those components that you want (and connect them to your own ui), or launch the "full stack" editor using toolbars, dialogs and all.

• Strict xHTML (5) . The editor displays strict XHTML by default (simplifies content conversion as needed). If this is not what you want, you can write your own parser and serializer to support whatever format you want.

• Placeholder / custom elements . Placeholders and even customizable elements allow you to manage almost any content inside the editor. Together with StructureValidator, you can apply rules for nesting, formatting, valid attributes, etc.

The source is available on GitHub , and the first beta is expected in a month or two.

Answer 2

Take a look at the HTML5 editor , it takes a textarea element and converts it into a div with contentEditable. It has a pretty customizable toolbar for easily formatting content.