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,

Answer 2

or set the default via css

.note-editor .note-editable {
    line-height: 1.2;
    font-size: 18px;
}

Answer 3

You can set the font size of the currently selected text,

$('.summernote').summernote('fontSize', 40);

but there seems to be no API to select text.

Being unable to set the default font size is quite strange, so I filed an issue in their repo.