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

Posted 2023-03-22

【中文标题】Summernote 和自定义“魔术笔”（样式）工具

【英文标题】：Summernote and customize "magic pen" (style) tool

【发布时间】：2019-09-26 06:04:59

【问题描述】：

我在我的项目中使用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']],  

但是如果没有成功，有人可以帮忙吗？

【参考方案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'],
  );
);

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