JavaScript Ruby
Pull request Compare This branch is 166 commits behind jhollingworth:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
lib
src
.gitignore
Gemfile
Gemfile.lock
LICENCE
Rakefile
VERSION
index.html
readme.textile

readme.textile

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

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
});

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> <p>Wysihtml5 exposes a <a href="https://github.com/xing/wysihtml5/wiki/Events">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> <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>