Bootstrap-wysiwyg: a tiny text editor

The bootstrap-wysiwyg text editor is only 1.5 KB in a minified and compressed form and a little more than 6 KB of source code, basic editing functions based on execCommand, drag-and-drop for inserting images, support for standard hot keys and nothing more. The editor works in modern browsers (Chrome 26, Firefox 19, Safari 6) and on mobile platforms (IOS 6 iPad / iPhone, Android 4.1.1 Chrome). Dependencies - jQuery, jQuery HotKeys and Bootstrap.

Text is edited in divwith an attribute contenteditable, without creating an iframe and textarea. It does not have a standard toolbar and styles - they can be created using Bootstrap tools. Editing commands are attached to buttons using the attributedata-edit. Here is an example of a toolbar fragment that controls the style of the text:

Keyboard shortcuts can be specified through the hotKeys object:

$('#editor').wysiwyg({
        hotKeys: {
                'ctrl+b meta+b': 'bold',
                'ctrl+i meta+i': 'italic',
                'ctrl+u meta+u': 'underline',
                'ctrl+z meta+z': 'undo',
                'ctrl+y meta+y meta+shift+z': 'redo'
        }
});

Actually, that’s almost all. A few more nuances of working with the editor are described on the demo page with instructions and in the project repository .

This editor arose during the work on the MindMup project , a web application for creating associative maps. The developers needed a simple content editor, but the existing options did not suit them - they dragged along a bunch of code to support old browsers and built-in toolbars, inconvenient schemes for working through frames and hidden text fields, did not work well on mobile devices with a touch interface and conflicted with Bootstrap. Using the capabilities of HTML5, jQuery and Bootstrap, we managed to fit the required minimum of functionality into less than two hundred lines of code.

After publishing the code on Github, it turned out that just such a modern and lightweight editor was sorely lacking - almost two thousand subscribers got in two weeks.

The editor is licensed under MIT.