Custom Templates

To define custom templates for buttons and / or modals, you can define an object with custom templates. Set the option customTemplates to this object. A template is a function which returns a string.

Arguments

The function takes one argument. This argument is an object with two properties.

{
   locale: {},
   options: {}
}

Custom Templates Object

You can override each existing template. These are:

• blockquote
• color
• emphasis
• font-styles
• html
• image
• link
• lists

You can also define your own buttons. Just create a template and define a boolean property in options.toolbar.

Recommendation

When defining your own templates, look at the classes used and mimic them as good as possible. Also try to mimic the view logic like buttons size option and locales to be as compatible as possible.

Handlebars runtime is included. You should use it. Define your templates as handlebars template and precompile it like I did.

Examples

Example 1 - Overriding default template

For example, the default template used for the html view button looks roughly 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(context) {
    var locale = context.locale;
    var options = context.options;
    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 template.

Example 2 - Defining own button

var myCustomTemplates = {
  custom1: function(context) {
    return "<li>" +
      "<a class='btn btn-default' data-wysihtml5-command='insertHTML' data-wysihtml5-command-value='&hellip;'>hellip</a>" +
      "</li>";
  }
};


$('.textarea').wysihtml5({
  toolbar: {
    custom1: true
  },
  customTemplates: myCustomTemplates
});