wysiwyg.js

Download Demo
wysiwyg.js is a (minified) 12k contenteditable-editor with no dependencies. It does only:

• Transforms any HTML-element into contenteditable
• onselection-event: e.g. to open a toolbar
• onkeypress-event: e.g. to handle hotkeys
• onplaceholder-event: show/hide a placeholder
• .bold(), .forecolor(), .inserthtml(), … functions

It works with:

• Internet Explorer 6+
• Firefox 3.5+
• Chrome 4+
• Safari 3.1+

If a <textarea> was used as ‘element’, the library:

• keeps the <textarea> in sync
• falls back to the <textarea> if the browser does not support ‘contenteditable’
• Old iOS and Android 2.3- also degrade to <textarea>

There is also a (minified) 10k jQuery-plugin ‘$.wysiwyg()’ – plus (minified) 2k CSS – to create a full-featured editor which depends on:

• wysiwyg.js
• jQuery
• FontAwesome (or JPG/PNG/GIF/SVG images)

The toolbar is easy to extend – e.g. smiley, fontname and fontsize buttons below. It is used on a website with 300M page impressions a month.