Is There a Way To Limit The Available Paragraph Styles in Summernote?

Question

I'm using summernote for editing in a basic CMS. Here is the code I am using:

$(document).ready(function() {

        $("#summernote").summernote({
            height: 600,
                styleWithSpan: false,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['para', ['ul', 'ol', 'paragraph','style']],
                    ['view', ['codeview']],
                    ['insert', ['mypicture','link','table','hr']]
                        ],
                        buttons: {
                            mypicture: PictureButton
                          },
                          disableDragAndDrop: true
                });

                $('#save').click(function(){
                    var mysave = $('#summernote').summernote('code');
                    $('#content').val(mysave);
                });
    });

In the toolbar I use ['para',['style']] to allow the user to choose heading/paragraph styles like H1 and P.
Is there any way to limit the dropdown to only allowing them to use H1, H2, and P?

Answer 1

You can easily achieve it by changing your code this way

$(document).ready(function() {

        $("#summernote").summernote({
            height: 600,
                styleWithSpan: false,
                toolbar: [
                      ['style', ['bold', 'italic', 'underline']],
                      ['para', ['ul', 'ol', 'paragraph','style']],
                    ['view', ['codeview']],
                    ['insert', ['mypicture','link','table','hr']]
                ],
                styleTags: ['p', 'h1', 'h2'],
                buttons: {
                    mypicture: PictureButton
                },
                disableDragAndDrop: true

                });

                $('#save').click(function(){
                    var mysave = $('#summernote').summernote('code');
                    $('#content').val(mysave);
                });
    });

where the relevant line is styleTags: ['p', 'h1', 'h2'].