Overview

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

Examples

• http://jhollingworth.github.com/bootstrap-wysihtml5

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>

Usage

<textarea id="some-textarea" placeholder="Enter text ..."></textarea>
<script type="text/javascript">
	$('#some-textarea').wysihtml5();
</script>

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

$('#some-textarea').val();

Advanced

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

$('#some-textarea').wysihtml5({
	"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:

$('#some-textarea').wysihtml5({
	"events": {
		"load": function() { 
			console.log("Loaded!");
		},
		"blur": function() { 
			console.log("Blured");
		}
	}
});

You can access the wysihtml5 editor object like this:

var wysihtml5Editor = $('#some-textarea').wysihtml5().editor;
wysihtml5Editor.composer.commands.exec("bold");