Summernote 自定义工具栏

Posted 2023-03-22

【中文标题】Summernote 自定义工具栏

【英文标题】：Custom toolbar with Summernote

【发布时间】：2015-05-02 23:36:55

【问题描述】：

如何知道summernote的工具栏可以启用哪些功能，怎么做？

在 API 文档中，我只能找到“工具栏：数组（可选）”，无需进一步解释。

感谢其中一个示例，我已经成功启用了一些功能，但是我还可以如何启用：代码、缩进和缩进？

$(".summernote").summernote(
    styleWithSpan: false,
    toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol']]
    ]
);

【参考方案1】：

在 settings.js 你有基本设置（所有功能都开启）：

toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['table', ['table']],
    ['insert', ['link', 'picture', 'hr']],
    ['view', ['fullscreen', 'codeview']],
    ['help', ['help']]
  ],

缩进在'paragraph'

【讨论】：

这已移至src/js/defaults.js 并略有更改。

是否可以微调['style', ['style']] 部分？喜欢禁用除<p> 和<h5> 标签之外的所有标签？这是必需的，因此客户端在使用未在 Sass 中设置的 h1 标签时不会弄乱设计。

@NicolasV 您是否设法仅获得

@AlexandruComan 使用 styleTags 选项进行管理：// default value is ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] styleTags: ['p', 'blockquote', 'pre']

另外说明：styleTags 选项是 summernote 选项，而不是 toolbar 选项。

【参考方案2】：

paragraph包括indent和outdent，codeview正如它所暗示的那样codeview .

$('.summernote').summernote(
    toolbar: [
        //[groupname, [button list]]

        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['view', ['codeview']],
    ]
);

如果您查看 Summernote 主网站而不是 API 文档，您会看到一个清晰的示例，它解释了如何自定义工具栏。它位于 Deep Dive 页面并向下滚动到自定义工具栏。它还列出了可用的工具栏按钮。

http://summernote.org/#/deep-dive#custom-toolbar

【讨论】：

在你的工具栏中你设置['style', ['bold', 'italic',...你在哪里设置h5tags？而不是使用这样的所有样式：['style', ['style']]?