Learning jQuery

Previously I had posted about collection of "jQuery Text Editor Plugins" which are developed in jQuery. But in this post, I will show you a Rich Text Editor plugin based on HTML 5 only. No jQuery is needed to use this plugin.

WYSIHTML5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Features

• It's fast and lightweight (smaller than TinyMCE, Aloha, ...)
• Auto-linking of urls as-you-type
• Generates valid and semantic HTML5 markup (even when the content is pasted from MS Word)
• Uses class names instead of inline styles
• Unifies line break handling across browsers
• Uses sandboxed iframes in order to prevent identity theft through XSS
• Speech-input for Chrome
• No jQuery required

Browser Support

• Firefox 3.5+
• Chrome
• IE 8+
• Safari 4+
• Safari on iOS 5+
• Opera 11+

How to use it

To use this plugin, one need to include 2 script files which you can download from its official website. The first script contains the html5 parser rules that are needed for wysihtml5 in order to create valid and desired markup. The second script is the minified wysihtml5 library.

All you need to do is to place a textarea control on your page and WYSIHTML5 transforms it into a rich text editor. This plugin comes with many options for configuration and has various events to handle.

Feel free to contact me for any help related to jQuery, I will gladly help you.