Summernote和自定义“魔笔”(风格)工具

Question

我在我的项目中使用summernote，我想自定义带有“魔笔”图标的style按钮。在此按钮中，您可以设置h1-h6或quotes，code(前标记)....

下面是我的summernote工具栏设置：

                    toolbar: [                           
                        ['style', ['style']],                          
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['view', ['fullscreen', 'codeview']],
                        ['help', ['help']]
                    ]

第一个style设置用于“魔笔”按钮(工具栏上从左起第一个)，第二个style用于加粗斜体...按钮组(工具栏上左起第二个)。

那么有没有可能用“神笔”图标定制first style按钮呢？

我需要从那里删除一些选项...h1，h5，quotes，代码...

在互联网上，我找到了一些不起作用的解决方案：

StyleTags选项(不是工具栏)：

                     styleTags: 
                         ['p', 'blockquote', 'pre']

或者指定第一个“style”：

                    toolbar: [                           
                        ['style', ['blockquote', 'pre']],  

但是如果没有成功，谁能帮上忙呢？

Answer 1

不知道你是否已经解决了这个问题，但今天遇到了这个问题，Summernote文档可能不是最好的，但这对我来说很有效，将来可能会对其他人有所帮助。

$(document).ready(function() {
  $('textarea[data-content~=summernote-content]').summernote({
    height: 400,
    toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'italic', 'underline', 'clear']],
          ['help', ['help']]
        ],
        styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5'],
  });
});

因此，您只需在工具栏标记中将样式定义为正常样式，然后在其下方指定您希望显示的实际属性。