share
Stack OverflowWhat's the best WYSIWYG Editor for use with jQuery?
[+134] [17] Chris Pietschmann
[2009-07-17 01:17:59]
[ jquery html editor wysiwyg ]
[ http://stackoverflow.com/questions/1141073]

I know there are a quite a few WYSIWYG HTML editors written in JavaScript, but most of them aren't written to take advantage of jQuery. I'm looking to use one in a project I'm working on, and I would like to know which of ones are the best.

I'd prefer it to make use of jQuery for compatibility reasons, but it isn't required to be a jQuery plugin. However, I'm sure that the best ones out there are plugins.

What WYSIWYG HTML Editors for use with jQuery are the best? Which do you use, and do you have any comments about them?

(10) Damn they're all uggly! - yoda
[+47] [2009-07-17 01:23:13] superjadex12

Well there is actually a jquery plugin : https://github.com/akzhan/jwysiwyg

It is a bare-bones framework implementation though, exactly why I like it. You can extend it exactly to your needs. You might need something more robust, but I personally would recommend and do use jwysiwyg, it is easy to understand and extremely lightweight compared to tinymce or fckeditor.


(3) We just moved from TinyMCE to jwysiwyg for our public-facing editing largely because the voerhead for TinyMCE is so large. We still use TinyMCE in the back-end for admins, but for more basic requirements jwysiwyg is really good. - Toby Hede
It doesn't work well with Internet Explorer without tweaking. code.google.com/p/jwysiwyg/issues/detail?id=128#c0 - Zack Peterson
I can't get the examples to work at all with IE8 - Phil Hale
Re: @ZackPeterson's issue --it is marked as fixed. - EBarr
1
[+24] [2010-10-18 16:49:48] balupton

Wow no one has mentioned Aloha Editor

http://aloha-editor.com/

alt text


(2) Didn't see any official list of browsers on the site and it doesn't seem to degrade well. I guess that is to be assumed with HTML 5, but limits its usefulness... One of the demo pages throws a script error in IE 6 (not a big deal), hard crashes IE 7 (using IE Tester - my-debugbar.com/wiki/IETester/HomePage) and behaves erratically in IE 8 (some formatting works, some doesn't, toolbar buttons don't always perform the right action). Looks great in Chrome though... - Tim Medora
Hrmm. It's aim is for IE6+ compatibility (as surprisingly, IE was actually the first to implement the HTML5 contenteditable tag). I'll forward this onto the team :-) Thanks for the feedback! - balupton
2
[+21] [2009-07-17 01:24:30] Soviut

MarkItUp [1] is a semi-WYSIWYG editor written with JQuery. It lets users enter simplified markup schemes such as textile, markdown or even plain HTML. The user can then hit a preview button to have the server render out a preview. It is very similar to the stack overflow text box, in fact.

I actually prefer this method as it tends to yield cleaner markup than standard rich text editors, but it is still simple enough for the average user to understand.

[1] http://markitup.jaysalvat.com/home/

wow, this one isn't really a wysiwyg editor, but it looks really interesting! - Chris Pietschmann
3
[+12] [2009-07-22 00:54:25] Chris Pietschmann [ACCEPTED]

jHtmlArea - WYSIWYG HTML Editor for jQuery [1]

A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page. The minified script alone is 7kb, and with css and image files it's a total of 15kb.

This project also include Visual Studio JavaScript Intellisense support.

alt text

[1] http://jhtmlarea.codeplex.com

(1) This doesnt seem to output xhtml compliant code (Inserting of images) Also it doesnt appear to work in IE8 on my machine , works fine in firefox though. I like it though very good and simple. I found a lot of other editors hard to customise. SA - Andi
Please report any issues you have with it to the jHtmlArea projects Issue Tracker: jhtmlarea.codeplex.com/WorkItem/List.aspx Thanks - Chris Pietschmann
This one has a post issue with not posting the HTML data. Unfortunate as the plugin rocks other than that. - CmdrTallen
doesnt work in ie6 - msony
(2) Why don't you upgrade instead of using a nearly 10 year old browser that is completely packed full of security vulnerabilities? You have plenty to pick from: IE8, Firefox 3.5, Safari or Chrome. - Chris Pietschmann
(4) Well, I'm sure mr. msony is worried about the browser his end users are using, not his own browser. Still, I've dropped supporting IE6 users myself. You might still get a few stragglers using IE6, but not enough to warrant the enormous cost of engineering for IE6. - Adam Nofsinger
Unfortunately 10% of users still use IE6 and the company I work for insists that we support them. :( w3counter.com/globalstats.php - Rowno
(5) People use IE6 as long as it is supported (by webdevs). The longer you guys continue supporting it, the longer it will stay alive. Please do yourself a favor and drop the support. - jholster
(2) Awesome project, but where is the documentation? Reading through source code to find hard-coded values and names is not fun. - Nick Presta
This editor looked good until I noticed that the last release date was in 2009! - Phil Hale
Messes up markup in Chrome. I get div tags instead of p tags. - Kiran Jonnalagadda
4
[+12] [2010-08-11 10:18:45] mortiy

CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor which can be easily added into any web site.

9 KB minified (with pictures)

http://premiumsoftware.net/cleditor/


5
[+8] [2010-01-19 17:17:06] FredCK

CKEditor is now bringing native support for jQuery: http://ckeditor.com/blog/CKEditor_for_jQuery

The jQuery community will certainly enjoy it!


Thanks, Fred!!! - Josh Stodola
I just tried using the jQuery adapter and it didn't want to save properly, in that it didn't update the textareas before posting the form. - Daniel Huckstep
So far so good. :) - Kenny Cason
6
[+6] [2009-07-18 03:25:25] Sander

we used Nicedit [1] in 2 projects now, if we find anything better we will switch, but untill now we are satisfied with the results of this Nicedit.

its Lightweight and easy to implement.

[1] http://nicedit.com/

(1) This one doesn't use jQuery. - user133145
(1) looks good though, like the fact they have provided code to get you started instantly, would be useful for anyone with limited knowledge - Andi
Handy feature with the integrated image upload too :) - Andi
This one is great! Thanks Sander. - SCL
7
[+5] [2010-10-18 16:37:52] troex

There is new but already powerful WYSIWYG written purely in jQuery and UI - elRTE [1]

[1] http://elrte.org

Compatible with every major browser. I like it - Stanislav Palatnik
8
[+2] [2010-12-16 04:58:58] Cooluhuru

I tried jwysiwyget, and I had diffculties to make it work with 2 instances on the same page.

I discovered CLedit [1] wich is jquery based, and I really like the interface configuration (Ability to easily define color code available, and styles) witouth having to go deep in the plugin's code.

I reckon it.

[1] http://premiumsoftware.net/cleditor/

9
[+2] [2009-07-17 06:44:35] Michel

There is Damn Small Rich Text Editor which aims to have the smallest footprint possible : http://avidansoft.com/_en/scripts [1]

And there is also uEditor, originally based on widgEditor but rewritten for jQuery and considerably modified since : http://www.upian.com/upiansource/ueditor/en

And i forgot WYMeditor, a web-based WYSIWYM (What You See Is What You Mean) XHTML editor : http://www.wymeditor.org/

[1] http://avidansoft.com/%5Fen/scripts

Might it be possible that you have added the wrong url to the first link? it is the same url as the one for the second link, the uEditor one. - Sander
Yes. I made the correction. - Michel
eh lol, you turned them around now :P the uEditor link goes to avidansoft and the avidansoft link goes to the uEditor site :D - Sander
I just fixed the links - Chris Pietschmann
@Chris Pietschmann : merci - Michel
10
[+1] [2009-07-17 03:58:28] ScottE

I've used FCKeditor [1] in conjunction with a jquery plugin [2]

It did the trick for me, as I've used FCKeditor for ages. It's (the plugin) a bit tricky to get used to in complex situations, so let me know if you give it a go.

FCKeditor also has a new editor in the works called CKeditor [3] that sounds promising.

[1] http://www.fckeditor.net/
[2] http://www.fyneworks.com/jquery/FCKEditor/
[3] http://ckeditor.com/

11
[+1] [2010-10-06 09:17:42] Goldfrapper

About jwysiwyg: The location of the projects seems to have changed from google code to github: http://akzhan.github.com/jwysiwyg/. THis projects offers clean code and very configurable wysiwyg. Perfect for projects using DVCS integration (via git). [Last commit was done one weeks ago.]


12
[+1] [2010-10-18 16:46:03] Shyju

HTML box is a good one which works based on jQuery.It has got most of the formatting toolbar and its only 14 KB size

http://htmlbox.remiya.com/

http://htmlbox.remiya.com/cms/download/


links mentioned here are not working anymore. see remiya.com/htmlbox for the website. - Roger
13
[0] [2011-03-21 19:00:11] Alexander Szlezak

check out http://www.aloha-editor.org - pjure wysiwyg html5 editor - works fine with jquery and makes use of the html5 contenteditable field


Duplicate. Aloha has already been mentioned. Perhaps a comment on that answer would be better :) - balupton
14
[0] [2011-04-13 18:54:46] alixon

we used elRTE [1] is an open-source jQuery, jQuery UI based editor

[1] http://elrte.org/

15
[0] [2010-02-07 06:08:42] Uptown

Check out Stiqr.com [1]. They've created jQuery WYSIWYG web editor. All edits are done visually and there is no code involved. All you do is upload images and add shapes using their user-interface. It is pretty easy to use and even fun :).

[1] http://www.stiqr.com/

16
[0] [2009-07-17 01:21:29] Shingi

Have you tried this one called wmd: http://wmd-editor.com/demo


This looks like a good markdown editor; in fact it's the one that SO uses. However, I am looking for a WYSIWYG editor that allows non-"HTML Savvy" users to edit pages similarly to editing Word documents. - Chris Pietschmann
17