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.

Riella

Try fontSize with an upper-case S? – Agrestic

@torzaburo at first I also make some tries with fontSize:'18px', fontSize:18, font-size... with no luck, then I take a look on summernote and the easy way I saw it's to use $('.note-editable').css('font-size','18px'); as I explain in the answer. – Weissman

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,

Weissman

I thought about this, if there are no other options, I am going to use this. Thanks, just wanted to be sure if there was an option to do this. – Riella

I've never work with summernote before so I'm not 100% sure that there is another way to do it, however I take a look at the API as I said in my answer and I didn't see another option. Until you don't found another way you can use this option :). – Weissman

Answer 2

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.

Arva

Answer 3

or set the default via css

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

Slob