Question

我如何知道可以为summernote工具栏启用哪些功能，以及如何操作？

在API文档中，我能找到的是＆＃34; toolbar：Array（可选）＆＃34;没有进一步解释。

由于其中一个示例，我设法启用了一些功能，但是我还能如何启用：代码，缩进和突出显示？

＆＃13;

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

＆＃13;

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']]
  ],

缩进位于＆＃39;段落

中

Answer 2

段落包括缩进和 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

2 个答案: