Question

我在项目中使用summernote，并且希望使用“魔笔”图标自定义style按钮。在此按钮中，您可以设置h1-h6或引号，代码（预标签）。...

有我的summernote工具栏设置：

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

第一个style设置用于“魔术笔”按钮（工具栏上的左起第一个），第二个style设置用于粗体斜体...按钮组（在工具栏上的左起第二个）。

那么有没有可能使用“魔笔”图标自定义第一个style按钮？

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

在互联网上，我发现一些不起作用的解决方案：

StyleTags选项（不是工具栏）：

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

或指定第一个“样式”：

                    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'],
  });
});

因此，您只需在工具栏标签中按常规定义样式，然后在其下方指定要显示的实际属性即可。

Summernote并自定义“魔术笔”（样式）工具

1 个答案: