Question

如何从工具栏中删除outdent和indent按钮。我找到了删除存储按钮的列表的选项，但没有删除按钮。可能吗。我尝试过这个，但这不起作用：

    $('.editor').wysihtml5({
        toolbar: {
          "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
        },
        lists: {
          unordered: 'Unordered list',
          ordered: 'Ordered list',
        },

});

Answer 1

这个答案有点晚了，但如果这有助于任何人。

快速（脏）方式 - 使用CSS隐藏按钮：

a[data-wysihtml5-command="Outdent"],
a[data-wysihtml5-command="Indent"] {
    display:none !important;
}

更好的解决方案是使用自定义模板：

var myCustomTemplates = {
    emphasis : function(locale) {
        return "<li>" +
            "<div class='btn-group'>" +
            "<a data-wysihtml5-command='bold' title='Bold' class='btn btn-none btn-default' ><span style='font-weight:700'>B</span></a>" +
            "<a data-wysihtml5-command='italic' title='Italics' class='btn btn-none btn-default' ><span style='font-style:italic'>I</span></a>" +
            "<a data-wysihtml5-command='underline' title='Underline' class='btn btn-none btn-default' ><span style='text-decoration:underline'>U</span></a>" +
            "</div>" +
            "</li>";
    },
    lists : function(locale) {
        return "<li>" +
            "<div class='btn-group'>" +
            "<a data-wysihtml5-command='insertUnorderedList' title='Unordered list' class='btn btn-none btn-default' ><span class='fa fa-list-ul'></span></a>" +
            "<a data-wysihtml5-command='insertOrderedList' title='Ordered list' class='btn btn-none btn-default' ><span class='fa fa-list-ol'></span></a>" +
            //"<a data-wysihtml5-command='Outdent' title='Outdent' class='btn btn-none btn-default' ><span class='fa fa-outdent'></span></a>" +
            //"<a data-wysihtml5-command='Indent' title='Indent' class='btn btn-none btn-default'><span class='fa fa-indent'></span></a>" +
            "</div>" +
            "</li>";
    }
}

$('.texteditor').wysihtml5({
    toolbar: {
        "font-styles": false, //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": true, //Button which allows you to edit the generated HTML. Default false
        "link": true, //Button to insert a link. Default true
        "image": false, //Button to insert an image. Default true,
        "color": false, //Button to change color of font
        "blockquote": false, //Blockquote
    },
    customTemplates: myCustomTemplates
});

因此，上面的自定义模板仅返回前2个列表模板按钮

（因为最后2个在模板中被注释掉），

此外它还可以调整强调模板中的样式按钮到B I U

bootstrap3-wysiwyg - 删除outdent和indent按钮

1 个答案: