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

Options

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

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

Buttons

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

$('#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  
});

Custom Templates for Toolbar Buttons

To define custom templates for buttons, you can submit a customTemplates hash with the new definitions. Each entry should be a function which expects ‘locale’ to manage the translations.

For example, the default template used for the editHtml mode button looks like this

<li>
  <div class='btn-group'>
    <a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'><i class='icon-pencil'></i></a>" 
  </div>
</li>

You can change it to not use the pencil icon (for example) by defining the custom template like this:

var myCustomTemplates = {
  html : function(locale) {
    return "<li>" +
           "<div class='btn-group'>" +
           "<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'>HTML</a>" +
           "</div>" +
           "</li>";
  }
}

// pass in your custom templates on init
$('#some-textarea').wysihtml5({
   customTemplates: myCustomTemplates
});

This will override only the toolbar template for html, and all others will use the default.

Stylesheets

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;h3&gt;Events&lt;/h3&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> <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="http://api.jquery.com/jQuery.extend/" 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: {} } } }); &lt;/pre&gt; &lt;p&gt;There&amp;#8217;s quite a bit that can be done with parserRules; see &lt;a href="https://github.com/xing/wysihtml5/blob/master/parser_rules/advanced.js"&gt;wysihtml5&amp;#8217;s advanced parser ruleset&lt;/a&gt; for details. bootstrap-wysihtml5&amp;#8217;s default parserRules can be found &lt;a href="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"&gt;in the source&lt;/a&gt; (just search for &amp;#8216;parserRules&amp;#8217; in the file).&lt;/p&gt; &lt;h3&gt;Defaults&lt;/h3&gt; &lt;p&gt;You can change bootstrap-wysihtml5&amp;#8217;s defaults by altering:&lt;/p&gt; &lt;pre&gt; $.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') &lt;/pre&gt; &lt;p&gt;Operations on the defaults are not thread-safe; if you&amp;#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.&lt;/p&gt; &lt;h2&gt;The underlying wysihtml5 object&lt;/h2&gt; &lt;p&gt;You can access the &lt;a href="https://github.com/xing/wysihtml5"&gt;wysihtml5 editor object&lt;/a&gt; like this:&lt;/p&gt; &lt;pre&gt; 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/bootstrap-wysihtml5.pt-BR.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $('#some-textarea').wysihtml5({locale: "pt-BR"}); &amp;lt;/script&amp;gt; &lt;/pre&gt; &lt;p&gt;It is possible to use custom translations as well. Just add a new key to $.fn.wysihtml5.locale before calling the editor constructor.</p>