web-dev-qa-db-ja.com

Summernoteを使用したカスタムツールバー

Summernoteのツールバーで有効にできる機能とその方法を知るにはどうすればよいですか？

APIドキュメントでは、詳細な説明なしに「toolbar：Array（optional）」を見つけることができます。

例の1つのおかげでいくつかの機能を有効にできましたが、コード、インデント、アウトデントを有効にするにはどうすればよいですか

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

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'にあります

63
Sqrcz

paragraphには、indentおよびoutdentが含まれます、codeviewそれが示唆するようにcodeview。

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

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

APIドキュメントとは対照的に、メインのSummernote Webサイトを見ると、ツールバーのカスタマイズ方法を説明する明確な例が表示されます。ディープダイブページにあり、カスタムツールバーまでスクロールします。また、使用可能なツールバーボタンもリストします。

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

10
Lee Elvin