Rich edit in place

Question

What is the best solution for something that support:

• rich editor
• edit in place
• placeholder
• save HTML and strip out malicious etc.

I would like to have a nice and usable interface to change data on a profile. It must support bold, italic and multi-line text and being sure that no malicious code can be injected.

I am looking mostly for the Javascript side but if it come with some PHP code for the backend, it would be nice.

Answer 1

I use TinyMCE (http://tinymce.moxiecode.com/). It should have the majority of the functionality you need.

Answer 2

I'll recommend TinyMCE.

EDIT: And @wajiw beat me to it. Good sign though. :)

Answer 3

FCK Editor which is now CKEditor

it is free.

Answer 4

I've seen a few options:

• CKEditor (my personal favorite)
• TinyMCE (also very popular)
• NicEdit
• YUI's Rich Text Editor (part of much larger, and very good, YUI framework)
• Google's Closure Editor (part of Google's closure framework, what you get in GMail etc.)
• Dijit Editor (if you're using the Dojo framework)
• OpenWYSIWYG (true open source)
• jwysiwyg (for jQuery)

Also see http://en.wikipedia.org/wiki/Online_rich-text_editor and http://blog.insicdesigns.com/2009/07/rounding-up-the-best-javascript-wysiwyg-and-markup-editor/

Answer 5

I correctly use NicEdit but I would have changed to aloha-editor, an HTML5 WYSIWYG editor, if I had the time.

That said, I would not recommend any of those WYSIWYG editors as the html output is not only poor but also breaks the overall design by introducing a lot of inline styling that you probably did not expect for.

The only reason I use such an editor is that the client strictly asked for one. If you choose to use this method anyway, you would probably have to preprocess the user input. If I have a choice I use Markdown.

[EDIT: Added an example] As you can see in the html output below, what you see in not always what you get...

WYSIWYG Example:

Markdown Example:

Answer 6

I might be wrong (and please let me know if i am), but i don't believe TinyMCE nor CKedit do in place editing (that is, they do not use the contenteditable="true" without creating an iframe).

As far as i can tell, only nicedit ( http://nicedit.com/demos.php?demo=4 ) and google closure ( http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/editor/seamlessfield.html ) are able to edit inline.

I hope i'm wrong :) cheers!