Summernote set default font size and font

user_7868394 0
Viewed 21409

I'm using last version summernote library. How i can set default font size and font? I'm trying like this, but its not working:

 $('.text-editor').summernote({
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['codeview']]
        ],
        fontsize: '16'
    });

https://jsfiddle.net/dtgr5q29/142/

summernote javascript
5 Answers

Add this CSS to your own CSS file to override the settings from summernote.css:

/* ---------------------------------------------------
   SummerNote
----------------------------------------------------- */

.note-editable { 
    font-family: 'Poppins' !important; 
    font-size: 15px !important; 
    text-align: left !important; 
    
    height: 350px !important;
    
}

NB. For this example, I am using the following summernote initialization:

var gArrayFonts = ['Amethysta','Poppins','Poppins-Bold','Poppins-Black','Poppins-Extrabold','Poppins-Extralight','Poppins-Light','Poppins-Medium','Poppins-Semibold','Poppins-Thin'];

jQuery('#' + myID).summernote({
    fontNames: gArrayFonts,
    fontNamesIgnoreCheck: gArrayFonts,
    fontSizes: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '18', '20', '22' , '24', '28', '32', '36', '40', '48'],
    followingToolbar: false,
    dialogsInBody: true,
    toolbar: [
    // [groupName, [list of button]]
    ['style'],
    ['style', ['clear', 'bold', 'italic', 'underline']],
    ['fontname', ['fontname']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],       
    ['para', ['ul', 'ol', 'paragraph']],
    ['table', ['table']],
    ['view', ['codeview']]
    ]
});

And of course you need to load all these fonts via CSS.

user_5618830

If your editor is not running with simple text, you need to bind something to work it. Add this code into your summernote

$('#summernote').summernote('formatPara');
user_141098250

This seems to work

        $('#summernote').summernote('fontName', 'Arial');
        $('#summernote').summernote('fontSize', '12');
user_89010320

I noticed that using $('.note-editable').css('font-size','18px') seams to the cause the page to focus on the note when loading, which in my case caused the page to scroll to the bottom every time.

in the summernote.css, adding font-size: 16px; to .note-editor seems to do the trick without the scrolling problem.

just make sure this is in your summernote.css

.note-editor {
    position: relative;
    font-size: 16px;    
}
user_179291120
Related