使用 Summernote 自定义工具栏

Question

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

在 API 文档中，我只能找到 "toolbar : Array (optional)"，没有进一步的解释。

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

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

Answer 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'

Answer 2

段落包括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 页面上并向下滚动到 Custom Toolbar。它还列出了可用的工具栏按钮。

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

使用 Summernote 自定义工具栏

Custom toolbar with Summernote

toolbar

summernote