Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
This fork provides the same functionality as the original by jhollingworth but skips bootstrap 2 support and adds bootstrap 3 support.
Besides it uses bower for client side dependency management.
The old repository seems to be dead. Pull Requests are not accepted anymore since some time. The other bootstrap-wysihtml5 packages in the bower registry do NOT provide bootstrap 3 support, even if the name so suggests. They are not maintained either.
Furthermore the packages on bower do not use proper dependency management.
I will maintain this repo and I will accept pull requests.
Additionally to the existing dependencies I added handlebars in version 0.2.0. You only need the handlebars.runtime.min.js. The templates are precompiled during build. This adds less than 7kB to your client (~3kB gzipped). Thus it is easier to maintain the code.
Because maintaining code requires maintainable code.
Install all development dependencies via
npm install
Additionaly you need grunt, grunt-cli and bower as global packages installed.
Also install the client dependencies via
bower install
There is a grunt task for building. Just run
grunt
on the command line and everything should build fine.
If you are using bower use the “bootstrap3-wysihtml5-bower” package.
bower install bootstrap3-wysihtml5-bower
In the folder dist you will the plain unminified javascript files and two kinds of minified files.
bootstrap3-wysihtml5.min.js: This file contains the jquery plugin, the templates and the english translations. If you are referencing this file, you have to reference jquery, bootstrap jquery plugin, handlebars runtime and wysihtml.js.
bootstrap3-wysihtml5.all.min.js: This file contains all of the normal minified file plus the handlebars runtime and editor library. If you are referencing this file, you have to reference jquery and bootstrap jquery plugin.
bootstrap3-wysihtml5.min.css: This is the stylesheet for this plugin.
If you are using any other translation than english, you have to either build this plugin yourself, or reference it separately.
<textarea id="some-textarea" placeholder="Enter text ..." style="styles to copy to the iframe"></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 "blockquote": true, //Blockquote "size": <buttonsize> //default: none, other options are xs, sm, lg });
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’ and optional ‘options’ to manage the translations.
For example, the default template used for the editHtml mode button looks like this (with size fetched from the optional ‘options’)
<li> <div class='btn-group'> <a class='btn" + size + "' 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.
As of version 0.2.4 there are two new data attributes.
- data-wysihtml5-format-name
- Normally the inner html of the format command is used to display as current font style. This attribute overrides this value.
- data-wysihtml5-display-format-name
- Whether to show the current font style in the toolbar anyways.
It is possible to supply a number of stylesheets for inclusion in the editor ``:</p>
<pre>