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.

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.

• javascript
• summernote

• Try fontSize with an upper-case S? – user663031 Commented Nov 19, 2014 at 12:01
• @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. – albciff Commented Nov 19, 2014 at 13:40

3 Answers 3

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,

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.

or set the default via css

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