This tiny (8KB, < 250 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5.
This code is a fork which is currently 16+ commits behind. I've forked it and updated it with the changes that were in the pull request queue and found a few more around the place too.
This project does not intend to replace the original, but it is more up to date.
$('#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()