Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
If you are using rails use the bootstrap-wysihtml5-rails gem.
gem install bootstrap-wysihtml5-rails
Otherwise, download the latest version of bootstrap-wysihtml5.
<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>
<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();
An options object can be passed in to .wysihtml5() to configure the editor:
$('#some-textarea').wysihtml5({someOption: 23, ...})
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
});
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>
<h3>Events</h3>
<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>
<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’re adding tags or classes to parserRules) via ‘deepExtend’, 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’ll want to extend (or replace) parserRules. This example extends the defaults to allow the <code><strong></code> and <code><em></code> tags, and the class “middle”:</p>
<pre>
$('#some-textarea').wysihtml5('deepExtend', {
parserRules: {
classes: {
"middle": 1
},
tags {
strong: {},
em: {}
}
}
});
</pre>
<p>There&#8217;s quite a bit that can be done with parserRules; see <a href="https://github.com/xing/wysihtml5/blob/master/parser_rules/advanced.js">wysihtml5&#8217;s advanced parser ruleset</a> for details. bootstrap-wysihtml5&#8217;s default parserRules can be found <a href="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js">in the source</a> (just search for &#8216;parserRules&#8217; in the file).</p>
<h3>Defaults</h3>
<p>You can change bootstrap-wysihtml5&#8217;s defaults by altering:</p>
<pre>
$.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')
</pre>
<p>Operations on the defaults are not thread-safe; if you&#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.</p>
<h2>The underlying wysihtml5 object</h2>
<p>You can access the <a href="https://github.com/xing/wysihtml5">wysihtml5 editor object</a> like this:</p>
<pre>
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>
<script src="src/locales/bootstrap-wysihtml5.pt-BR.js"></script>
<script type="text/javascript">
$('#some-textarea').wysihtml5({locale: "pt-BR"});
&lt;/script&gt;
</pre>
<p>It is possible to use custom translations as well. Just add a new key to $.fn.wysihtml5.locale before calling the editor constructor.</p>