How to set font-size in summernote?

Question

I have been using summernote as my default text editor but I haven't been able to set a particular font-size by default when i initialize it.

so far I have tried

$('.active-textcontainer').summernote({
        toolbar: [
            ['style', ['bold', 'italic', 'underline']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']]
        ],
         height:150,
         fontsize:'18px'
    });

and

$('.active-textcontainer').summernote({
        toolbar: [
            ['style', ['bold', 'italic', 'underline']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']]
        ],
         height:150,
         fontsize:'18'
    });

Ant help will be appreciated.

Answer 1

I've never use summernote, however looking at the API there is nothing (at least now) to specify default font size, I make a test doing some tries like you and seems that no one works.

A possible solution to this is to apply directly the font-size style to the editor div using jQuery because when you initialize summernote in an object always create the follow div : <div class="note-editable" ...>...</div>. So you can do the follow after initialization $('.note-editable').css('font-size','18px'); in your code this could be:

$('.active-textcontainer').summernote({
    toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']]
    ],
     height:150
});

$('.note-editable').css('font-size','18px');

This solution it's a little tricky an if the class name of the div editor change on the next version this will not work however maybe it's enough for your case.

Hope this helps,