Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (60 sloc) 2.33 KB


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_rc2.js"></script>
<script src="js/jquery-1.7.1.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.



To override what buttons to show, you pass in an object literal:

	"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

Wysihtml5 exposes a number of events. You can hook into these events when initialising the editor:

	"events": {
		"load": function() { 
		"blur": function() { 

You can access the wysihtml5 editor object like this:

var wysihtml5Editor = $('#some-textarea').wysihtml5().editor;
Something went wrong with that request. Please try again.