Search code examples
bootstrap-wysiwyg

Bootstrap 3 WYSIWYG: Only show specific font-styles in dropdown?


I'm currently using Bootstrap 3 WYSIWYG. I have set up the following textarea:

$(".textarea").wysihtml5({
    toolbar: {
        "font-styles": true,
        "emphasis": true,
        "lists": false,
        "html": false,
        "link": true,
        "image": false,
        "color": false,
        "blockquote": false
    }
});

However, I would like to only show the options "Normal text" and "Heading 2" in the font-styles dropdown. Is this possible?


Solution

  • font-size

        var myCustomTemplates = {
        "font-styles": function (context) {
            var locale = context.locale;
            var options = context.options;
            return "<li class='dropdown'>"+
                    "<a class='btn btn-default dropdown-toggle btn-"+ options.toolbar.size+"' data-toggle='dropdown'>"+
                     "<span class='glyphicon glyphicon-font'></span>"+
                     "<span class='current-font'>"+ locale.font_styles.normal+"</span>"+
                     "<b class='caret'></b>"+
                     "</a>"+
                     "<ul class='dropdown-menu'>"+
                       "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='p' tabindex='-1'>"+locale.font_styles.normal+"</a></li>"+
                     "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2' tabindex='-1'>"+locale.font_styles.h2+"</a></li>"+
                      "</ul>"+
                    "</li>";
        }
    
    // pass in your custom templates on init
    $('.textarea').wysihtml5({
                            toolbar: {"font-styles": true,
                             "emphasis": true,
                             "lists": false,
                             "html": false,
                             "link": true,
                             "image": false,
                             "color": false,
                             "blockquote": false},
                            customTemplates: myCustomTemplates
                            });