Bootstrap-wysiwyg: a tiny text editor

The bootstrap-wysiwyg text editor is only 1.5 KB in 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 are jQuery, jQuery HotKeys and Bootstrap.



Text is edited in a div with the attribute contenteditable , without creating an iframe and textarea. It does not have a standard toolbar and styles - they can be created by means of Bootstrap. Editing commands are bound to buttons using the data-edit attribute. Here is an example of a fragment of the toolbar that controls the outline of the text:

 <div class="btn-group"> <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a> <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a> <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a> </div> 

Keyboard shortcuts can be set via 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, it is almost everything. A few more nuances of working with the editor are described on the demo page with instructions and in the project repository .



This editor appeared during the work on the project MindMup - a web application for creating associative maps. The developers needed a simple content editor, but the existing options did not suit them - they pulled a bunch of code to support older browsers and embedded toolbars, inconvenient work patterns 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 in less than two hundred lines of code.



After the publication of the code on Github, it turned out that it was precisely such a modern and light editor that everyone really lacked - in two weeks nearly two thousand subscribers had gathered.



The editor is distributed under the MIT license.