How to set font size in summernote?

Question

I use summernote as the default text editor, but by default I was not able to set a specific font size when I initialize it.

So far i 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 would be appreciated.

Answer 1

I have never used summernote , however, looking at the API , there is nothing (at least for now) to indicate the default font size, I am doing a test making some attempts similar to you, and it seems like nobody is working.

A possible solution for this is to apply the font-size style to the div editor using jQuery using jQuery , because when you initialize summernote in an object, always create the following div : <div class="note-editable" ...>...</div> That way you can do the following after initializing $('.note-editable').css('font-size','18px'); in your code, it 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 is a little complicated, if the class name in the div editor changes in the next version, this will not work, maybe this is enough for your case.

Hope this helps,

Answer 2

or set default value with 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 the API does not exist for text selection.

Unable to set the default font size is rather strange, so I posed a problem in my repo .