About
This tiny (5KB, < 200 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5. Here are the key features:
- Automatically binds standard hotkeys for common operations on Mac and Windows
- Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
- Voice dictation input (only in Chrome)
- Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on...
- Does not force any styling - it's all up to you
- Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
- Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV
- (Optionally) cleans up trailing whitespace and empty divs and spans
- Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6, reported by users to work in IE10)
- Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)
Why?
While building a content editor for MindMup we found plenty of good HTML5 WYSWYG editors online, but most were duplicating functionality that already exists in jQuery and Bootstrap, implementing things that were meanwhile added to HTML5 and supported in major browsers, or doing too much magic such as inserting IFrames with backup text-areas. Most of this was to work around quirks in older browsers (which we didn't need) and caused focus problems on touch devices (which was an issue for us). Too much magic caused problems with bootstrap modals (a must for us). Most editors also build their own toolbars, which embed additional CSS and images and always turn out to be much worse than standard Bootstrap buttons.
It turns out, with HTML5, everything we need can fit into less than 5K. We built this tiny tiny editor that does everything we need, does not impose any particular additional CSS and uses modern browser functionality without reimplementing jQuery and Bootstrap.
It's released under the MIT license, so fork and enjoy!
Usage
$('#editor').wysiwyg();
Don't forget to style your editor div:
#editor {overflow:scroll; max-height:300px}
If you want to use this for a mobile web site, make sure to read about how to style it to optimise mobile screen usage and experience (please note that this demo page isn't optimised for mobile access).
Optionally, also create a toolbar (see the source of this page for an example):
<div class="btn-toolbar" data-role="editor-toolbar"
data-target="#editor">
...
</div>
In the toolbar, execute simple commands by adding a data-edit attribute to a link.
<a data-edit="bold">...</a>
execute more complex commands by adding an argument after a blank or providing an input with a data-edit command (the input value is used as an argument). In case of file inputs, the file contents are read in using the FileReader API and used as the command value.
<a data-edit="fontName Arial">...</a> ... <input type="text" data-edit="createLink"/> ... <input type="file" data-edit="insertImage" />
Use standard jQuery methods to access and set content and focus. You can also ask for cleaned up HTML content:
$('#editor').cleanHtml()
