Seek a jQuery-based inplace HTML editor

Question

I just stepped over to http://plugins.jquery.com/search/node/editor - lots and lots of choices - and if to judge by the dates, many new offerings. I'm hoping someone can help me narrow down the field according to these priorities...

• Stability & Well-formed XHTML (might argue against some of the most recent unless they are revisions with a clear track-record)
• Inplace editing
• Good AJAX integration
• For internal / admin / CMS usage so it can be as bloated as it needs to be long as it's easy to implement the basics:
  • bold
  • italics
  • indents
  • lists

No need for tables but dropdowns that show relevent CSS selectors would be nice.

Thanks.

Answer 1

I know that you are looking for a jquery based rich text editor. But the one i will be suggesting is based on prototype. Its called WYSIHAT, an open-source project by 37signals team. You can say that it is a framework for WYSIWYG editors. Why would you choose that? Simple, Easy customization, Well formed XHTML and ofcourse Good AJAX Integration. You have loads of other rich text editors but all are not easily customizable. I say so coz of the fact that you will have major trouble changing the "widget" set provided by the editor to something of your liking. And if there is bad code anywhere then it is a PITA to rectify it coz of the poor standards of coding by the developer.

Since you really don't care about the bulkiness i doubt using prototype along with jquery would be a big hassle. It would be a bad option to use both if it was not for internal/ admin/ CMS use. But since your main aim is "simplicity", WYSIHAT comes to your rescue. It provides you with a foundation on which you can build your self-woven rich text editor.

Sources:

37Signals: Introducing WYSIHAT. An eventually better open-source WYSIWYG Editor.

If you are developing the CMS in Ruby-on-Rails then you are in for a treat:

A WYSIHAT Rails engine:

http://www.80beans.com/2009/10/01/wysihat-engine/

http://github.com/80beans/wysihat-engine

WYSIHat tutorials:

Setting up WysiHAT. A Tutorial. Part 1:

Setting up WysiHAT. A Tutorial. Part 2:

An advanced toolbar for WysiHat:

http://github.com/80beans/wysihat-advanced-toolbar

Here is the API documentation:

http://josh.github.com/wysihat/wysihat/wysihat/commands.html

By the way.. The WYSIHat js file after minifying is just 6kb. 1000 times lesser than TinyMCE.

Answer 2

Narrowing down your list of options: some of the better jQuery-based editors that fit at least most of your desired points seem to be:

• Jeditable -- very flexible
• WYMeditor -- popular with CMSes
• uEditor -- clean and simple, but not in-place
• IPWEditor -- uses TinyMCE or FCKeditor :(

Answer 3

It's not a jQuery plugin, but TinyMCE is definitely worth a look and it plays nicely with jQuery. It has a great community and lots of plugins. As far as I can tell it meets all your requirements.

Answer 4

I second dave1010's answer -- I've had great experiences using TinyMCE with jQuery on many projects.

Answer 5

I just wanted to give you some information about this requirement...

Well-formed XHTML

Most of the JavaScript based inline editors use "contentEditable" in order to open a document for editing. This relies on the browser to generate the required HTML or XHTML based on a series of commands and based on the user clicking and typing.

So you will most likely see a variation in implementation based on browser - without mentioning any names, one browser will give you all upper-case tags, one might not close all tags properly and so on. So bear in mind, the browser that you use will affect the features and output if the editor uses the browser to generate the (X)HTML.