CODEWITHSUNDEEP
javascriptsummernote
Bazinga777
Bazinga777

Reputation: 5281

How to set font-size in summernote?

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.

Upvotes: 6

Views: 20875

Answers (3)

PowPi
PowPi

Reputation: 163

or set the default via css

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

Upvotes: 1

Dan Dascalescu
Dan Dascalescu

Reputation: 151747

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.

Upvotes: 1

albciff
albciff

Reputation: 18517

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,

Upvotes: 11

Related Questions