Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/wiki/Custom-Templates below:

Custom Templates · bootstrap-wysiwyg/bootstrap3-wysiwyg Wiki · GitHub

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.

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

{
   locale: {},
   options: {}
}

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.

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.

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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4