10 jQuery Text Editor Plugins to help you get that WYSIWYG (What You See Is What You Get) on your website. JavaScript rich live text editor has eased our life when we need to edit articles, post or even documents online. Most of the editors allow user to edit the content straight away – WYSIWYG, it just like editing a document with Microsoft office. Nowadays, I think all of the content management system, blog systems are using rich text editor.

So, here are the 10 RTEs that I can find online. From the most basic support of font formatting to advanced features such as image upload, table creation, Ajax support and so on. Enjoy!

Update 12/06/2013: This post has better ones: 10 BEST JQUERY AND HTML5 WYSIWYG PLUGINS

1. MarkitUp! – jQuery

markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

2. jWYSIWYG – jQuery

This plugin is an inline content editor to allow editing rich HTML content on the fly. It’s an alternative to WYMeditor with much less features. With a small file size less than 17Kb 26Kb total and only 9Kb 18Kb of code and 7Kb packed, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.

3. Lightweight RTE- jQuery

> Super lightweight 7kb uncompressed
> Compatible with major browsers
> Degrade gracefully
> GNU General Public License

4. HTMLBox – jQuery

> Easy Integration.
> Multiple Browser Support.
> Small Size. Size of 15kb (11kb minimized)
> XHTML Output Possible.
> Ajax Integration Supported.
> User Manual. A complete user manual, that will guide you through every step of integrating HtmlBox into your application and customizing it.

5. WYMEditor – jQuery

WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor. WYMeditor’s main concept is to leave details of the document’s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

6. TinyMCE – non-jQuery

TinyMCE is a platform independent web based JavaScript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

7. fckeditor – Non-jQuery

This HTML text editor brings to the web much of the power of desktop editors like MS Word. It’s lightweight and doesn’t require any kind of installation on the client computer.

8. Yahoo YUI Rich Text Editor – Non-jQuery

The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images.

9. Xinha – Non-jQuery

Xinha (pronounced like Xena, the Warrior Princess) is a powerful WYSIWYG HTML editor component that works in all current browsers. Its configurability and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD license makes it an ideal candidate for integration into any kind of project.

10. Rich Text Editor – jQRTE

> Separated logic and template, easy for you to change the look & feel.
> Separated the language file from the editor, easy for internationalization.
> Easy to integrate and customize.
> Tested with IE6, IE7, IE8, FF3, Opera9, Safari4, and Google Chrome2.
> Free and free of charge under the MIT License.

11. Some Russian WYSISYG

12. CLEditor WYSISYG

Tags: jquery what you see is what you get, jquery WYSIWYG, jquery wysiwyg plugins
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Pingback: 10 jQuery Text Editor Plugins | Web Design Northamptonshire()

  • brajan

    That’s great summary!!! HTMLBox rules! Thanks!

  • Harun

    This editor is more lite and useful than above examples:

  • https://github.com/bordeux/HTML-5-WYSIWYG-Editor bordeux
  • Divyanshu Negi

    great work

  • Mostafa Elsayhsoft

    اللهم علمنا ما ينفعنا و انفعنا بما علمتنا إنك أنت العليم الحكيم

  • Mostafa Elsayhsoft

    اللهم علمنا ما ينفعنا و انفعنا بما علمتنا إنك أنت العليم الحكيماللهم علمنا ما ينفعنا و انفعنا بما علمتنا إنك أنت العليم الحكيم

  • http://www.facebook.com/rajkumar.mani Raj Kumar

    is there any thing related to mobile

  • mvcguy

    CLEditor is definitely worth a look.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.