JavaScript Ruby
Switch branches/tags
Nothing to show
Pull request Compare This branch is 108 commits behind jhollingworth:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.


Quick Start

If you are using rails use the bootstrap-wysihtml5-rails gem.

gem install bootstrap-wysihtml5-rails

Otherwise, download the latest version of bootstrap-wysihtml5.

Files to reference

<link rel="stylesheet" type="text/css" href="/css/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"></link>
<script src="js/wysihtml5-0.3.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-wysihtml5.js"></script>


<textarea id="some-textarea" placeholder="Enter text ..."></textarea>
<script type="text/javascript">

You can get the html generated by getting the value of the text area, e.g.




An options object can be passed in to .wysihtml5() to configure the editor:

$('#some-textarea').wysihtml5({someOption: 23, ...})


To override which buttons to show, set the appropriate flags:

	"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
	"emphasis": true, //Italics, bold, etc. Default true
	"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
	"html": false, //Button which allows you to edit the generated HTML. Default false
	"link": true, //Button to insert a link. Default true
	"image": true //Button to insert an image. Default true,
	"color: false //Button to change color of font  


It is possible to supply a number of stylesheets for inclusion in the editor ``:</p> <pre> $('#some-textarea').wysihtml5({ "stylesheets": ["/path/to/editor.css"] }); </pre> <h3>Events</h3> <p>Wysihtml5 exposes a <a href="">number of events</a>. You can hook into these events when initialising the editor:</p> <pre> $('#some-textarea').wysihtml5({ "events": { "load": function() { console.log("Loaded!"); }, "blur": function() { console.log("Blured"); } } }); </pre> <h3>Shallow copy by default, deep on request</h3> <p>Options you pass in will be added to the defaults via a shallow copy. (see <a href="" title="">jQuery.extend</a> for details). You can use a deep copy instead (which is probably what you want if you&#8217;re adding tags or classes to parserRules) via &#8216;deepExtend&#8217;, as in the parserRules example below.</p> <h3>Parser Rules</h3> <p>If you find the editor is stripping out tags or attributes you need, then you&#8217;ll want to extend (or replace) parserRules. This example extends the defaults to allow the <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> tags, and the class &#8220;middle&#8221;:</p> <pre> $('#some-textarea').wysihtml5('deepExtend', { parserRules: { classes: { "middle": 1 }, tags { strong: {}, em: {} } } }); </pre> <p>There&#8217;s quite a bit that can be done with parserRules; see <a href="">wysihtml5&#8217;s advanced parser ruleset</a> for details. bootstrap-wysihtml5&#8217;s default parserRules can be found <a href="">in the source</a> (just search for &#8216;parserRules&#8217; in the file).</p> <h3>Defaults</h3> <p>You can change bootstrap-wysihtml5&#8217;s defaults by altering:</p> <pre> $.fn.wysihtml5.defaultOptions </pre> <p>This object has the same structure as the options object you pass in to .wysihtml5(). You can revert to the original defaults by calling:</p> <pre> $(this).wysihtml5('resetDefaults') </pre> <p>Operations on the defaults are not thread-safe; if you&#8217;re going to change the defaults, you probably want to do it only once, after you load the bootstrap-wysihtml plugin and before you start instantiating your editors.</p> <h2>The underlying wysihtml5 object</h2> <p>You can access the <a href="">wysihtml5 editor object</a> like this:</p> <pre> var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor; wysihtml5Editor.composer.commands.exec("bold"); </pre> <h2>I18n</h2> <p>You can use Bootstrap-wysihtml5 in other languages. There are some translations available in the src/locales directory. You can include your desired one after the plugin and pass its key to the editor. Example:</p> <pre> &lt;script src="src/locales/"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $('#some-textarea').wysihtml5({locale: "pt-BR"}); &lt;/script&gt; </pre> <p>It is possible to use custom translations as well. Just add a new key to $.fn.wysihtml5.locale before calling the editor constructor.</p>