Register now or login here to start promoting your blog and your favourite articles.
10 jQuery and non-jQuery javascript Rich Text Editors
21 Apr 2009 - 25 Comments
10 amazing free rich text editors that will boost your website functionality. I have collected 5 jQuery and 5 non-jQuery RTEs that come with simple features to office-like features.
Author: kevin | Source: queness
Goin Nutty

Introduction

Javascript rich text editor has ease 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 (What You See Is What You Get - WYSIWYG), it just like editting 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. Be sure to drop me a comment if you know other RTE that is not listed below. Enjoy.

MarkitUp - jQuery

Official Website | Demo
MarkitUp

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.

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Ajax dynamic preview
  • Supported: IE7, Safari 3.1, Firefox 2, Firefox 3. IE6 and Opera 9+ as-is.
  • Licence: MIT/GPL
  • File: Packed naked engine is about 6.5Kb.

jWYSIWYG - jQuery

Official Website | Demo
jWYSIWYG

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.

  • GNU General Public License v2
  • Compact and lightweight
  • Ajax dynamic preview
  • Browser friendly

Lightweight RTE- jQuery

Official Website | Demo
jWYSIWYG

I have made this Rich Text Editor as simple as possible to be easily changed according your needs.

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

HTMLBox - jQuery

Official Website | Demo
HTMLBox

Cross-browser interactive open-source HTML / XHTML textarea built on top of the jQuery library. Tested with Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari. The integration of HtmlBox into Content Manegement Systems, Forums, Guest Books, Contact Forms is as easy as a childs play.

  • 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.

D Small Rich Text Editor - jQuery

Official Website | Demo
D Small Rich Text Editor

This piece of code creates a Rich Text Editor ("RTE") from an IFRAME element. Yes, I know, there are tens of such scripts, and most of them are probably more sophisticated than mine, but my script's purpose is to provide enough basic functionality while having the smallest footprint possible.

  • Small (~18k) footprint! (Packed/Minified JS, Plugins & CSS sum to 12k w/o GZIP, HTML can be reduced to ~3k using GZIP, Images (w/o emoticons) are less than 3k)
  • Cross-browser
  • All basic Rich Text functionality
  • Plugin-enabled
  • Image Upload via AJAX (using the AjaxFileUpload plugin).
  • Resizing of text area.
  • Valid XHTML 1.0 Transitional markup (Note: this refers to the editor's markup and not to it's generated content which may or may not be valid!).
  • HTML Cleanup

WYMEditor - jQuery

Official Website | Demo
WYMEditor

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).

  • XHTML strict + CSS compliant
  • No font or text formatting, sizes or colors - WYMeditor is CSS-based
  • Designed to be easy to integrate into your application
  • No installation needed - this is 100% Javascript code - no plugin, no extension
  • Image, link, table support
  • Skins support via CSS
  • APIs, plugins support
  • Free and Open Source
  • Major browsers support

TinyMCE - non-jQuery

Official Website | Demo
TinyMCE

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.

  • Easy to integrate - Only a few lines of code needed.
  • Customizable - Themes and plugins, block invalid elements and force attributes.
  • Browserfriendly - Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
  • Lightweight - PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load.
  • AJAX Compatible - You can easily use AJAX to save and load content!
  • International - Multilanguage support using language packs.
  • Open Source - Free under the LGPL license, millions of ppl help test and improve this editor every day.

fckeditor - Non-jQuery

Official Website | Demo
fckeditor

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.

  • Multi browser compatibility
  • Outputs XHTML 1.0
  • CSS support for better integration with your web site
  • Font formatting: type, size, color, style, bold, italic, etc
  • Text formatting: alignment, indentation, bullets list, etc
  • Cut, Paste, and Paste as Plain Text, Undo and Redo
  • Paste from Word cleanup with auto detection
  • Image insertion, with upload and server browsing support
  • Right click context menus support
  • Plugins support
  • Spell checker
  • Lightweight and fast
  • Automatic browser detection and customization

Yahoo YUI Rich Text Editor - Non-jQuery

Official Website | Demo
Yahoo UI RTE

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. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

Xinha - Non-jQuery

Official Website | Demo
Xinha

Xinha (pronounced like Xena, the Warrior Princess) is a powerful WYSIWYG HTML editor component that works in all current browsers. Its configurabilty 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 licence makes it an ideal candidate for integration into any kind of project.

Conclusion

I hope you all love this resource. :)

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

Share This Post to Support Me! :)


Comments

James on 2 Feb 2010 says:
jWYSIWYG is simple, but doesn't have the font selection.
Ahmet on 27 Jan 2010 says:
i use ckeditor thanks post
presretac on 15 Jan 2010 says:
Thanks for sharing this.
german on 23 Nov 2009 says:
Here is another option http://www.jqframework.com/jqrte_domo.html
Wezo Alves on 18 Nov 2009 says:
http://ckeditor.com/
Jack Wong on 7 Oct 2009 says:
Thanks for sharing this. I been looking for more alternative simple html editor that using jquery.
Paul Irish on 5 Aug 2009 says:
Here's a new entrant that looks pretty solid: http://pietschsoft.com/post/2009/07/21/jHtmlArea-The-all-NEW-HTML-WYSIWYG-Editor-for-jQuery.aspx

Cheers
Jonathan Yarbor on 22 Jul 2009 says:
jWYSIWYG is the best!

it has a lot more features than appears. Open it up and look into the options 60% of its abilities are turned off. Set the visibility to true and it will appear!
HommeDeJava on 30 Jun 2009 says:
How about the footprint of TinyMCE?

GZip, versus non GZip?
Mike Wharton on 6 May 2009 says:
jQuery RTE is really nice, however it is old. I am starting to rebuild it and fix some of its quicks.

I'll post here when its ready...

Leave a comment

Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
Pixel Crayons Increase your traffic!

Buy wholesale computers directly from China at DHgate.com

Discover the tools to build your e-Commerce Site with Netfirms

  •  
  •  
  •  
  •  
  •  

Community News

Recent Comments

Random Posts


View all posts and news Back to top

About the Author

A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

Kevin Liew

Partner

  • Web and Designers
  • CSS Style
  • PV.M Garage Blogzine - (Italian)
  • TutsValley
  • Designrfix
  • CoolVibe
  • Web Developer Juice
  • Denbagus
  • Web Hosting Secret Revealed
  • PSD to HTML Conversion
  • BlueHost