Cutting edge online WYSIWYG editor wanted

Question

What is the most efficient WYSIWYG editor that can be used on a blog?

I'm looking for something like the one in Gmail, but I'm really annoyed that sometimes the cursor gets stuck in some invisible wrapper div tag or after selecting and deleting a part of text the cursor jumps to then end of the whole block.

The ideal editor doesn't have to be backwards compatible and may use emerging technologies. I don't have anything specific in my mind but I've heard about the Bespin project and wondered maybe the canvas tag could be of use. Or perhaps Silverlight or Flash, I don't know.

I'd use this editor to create and maintain fairly simple HTML document structures with hyperlinks, images, headers and lists. The ability to assign CSS classnames to nodes would be a plus. Speed and responsiveness is also a major factor.

Clarification:

I'd love to see an editor which doesn't rely on contentEditable, since as Pekka has mentioned that is the source of the annoyances.

Answer 1

Interesting question.

The most evolved HTML-based WYSIWYG editor in my opinion is CKEDitor. It has a clean API, the documentation is not perfect yet but it's getting there, and usability is very nice - although it sometimes still tends to show the problems you describe, but this is often down to the browser's "editable HTML" engine and something you will come across in every HTML/JS based WYSIWYG component.

Interested to see whether there is something more evolved in the Flash or Silverlight world.

Answer 2

http://tinymce.moxiecode.com/ I like this editor for simple web apps its pretty familiar to the users as well. TinyMCE is really easy to setup and is pretty fast, even in IE6. You can also set custom classes in a drop down and assign them to text, just like you would bold text which is nice. Very customizable as well.

As far as a Canvas text editor I haven't really seen one besides the Bespin project.

Answer 3

I use http://www.wymeditor.org/ for a project. It differs slightly from other alternatives. It does not give you all the font-size, font-color, bold etc. etc. But only lets you build the structural part of a page like: list, em, strong, table, headline etc.

You can of cause extend it with a set of classes. But the idea is that you for example can't change a columns (in a table) width but you can define a class which have the specific width, border etc.

It therefore don't permit the user to do unintended things :) which is both good and bad. Good: The pages conform to a specified style, clean, tight. Bad: If the user wants something unexpected, you have to add a class to do it.

It do rely on the content editable BUT it abstracts the browser away. So the code generated is fully standard and XHTML strict by the way. Take the demonstration to see it :)

I know you're looking for a plugin based editor but this statement: "I'd use this editor to create and maintain fairly simple HTML document structures with hyperlinks, images, headers and lists. The ability to assign CSS classnames to nodes would be a plus. Speed and responsiveness is also a major factor." Can Wymeditor easily manage.

Answer 4

Doing a HTML editor using something like Canvas would be far more complex than Bespin. In Bespin the text is always using the same font, there are no html or css rules to respect, it's just text that you can know beforehand how it should be rendered. And you have to keep in mind that doing something like Bespin isn't easy.

In HTML there are images, tables, lists, different font-sizes, floating elements... so doing all the rendering using Canvas would be a huge initial task, and after that you have to add the editing features to select the text, images, ...

Flash does support a limited set of HTML, it's really poor in that aspect so you can't expect a good HTML editor based on that.

With regards to Silverlight, I don't know its current state, but at the very first moment that they release something "usable", you can expect several such editors to popup like there are hundreds of little js editors that just use contentEditable.

The difference between all the js editors that claim to be fast, small or simple and the most widely used like CKEditor and TinyMCE, is that these ones work hard to fix the problems due to each browser and that's why they aren't so small, but on the other hand you have much better control of the output and the behavior while editing. In that aspect these editors are implementing lots of the features by themselves, contentEditable might be used to provide the basic keyboard functionality, but each day more features are implemented in js instead of relying on the native behavior of contentEditable.