yohn/bootstrap-wysihtml5

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.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>

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,
	"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"] }); &lt;/pre&gt; &lt;p&gt;Wysihtml5 exposes a &lt;a href="https://github.com/xing/wysihtml5/wiki/Events"&gt;number of events&lt;/a&gt;. You can hook into these events when initialising the editor:&lt;/p&gt; &lt;pre&gt; $('#some-textarea').wysihtml5({ "events": { "load": function() { console.log("Loaded!"); }, "blur": function() { console.log("Blured"); } } }); </pre> <p>You can access the wysihtml5 editor object like this:</p> <pre> var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor; wysihtml5Editor.composer.commands.exec("bold"); </pre>