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

796 views Asked by At

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?

1

There are 1 answers

0
fang_dejavu On BEST ANSWER

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