CODEWITHSUNDEEP
javascriptsummernote
Dmitry Vasilyuk Just3F
Dmitry Vasilyuk Just3F

Reputation: 187

Summernote set default font size and font

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/

Upvotes: 6

Views: 29155

Answers (5)

user17929112
user17929112

Reputation:

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;    
}

Upvotes: 0

hansen.palle
hansen.palle

Reputation: 11

This seems to work

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

Upvotes: 1

Hadayat Niazi
Hadayat Niazi

Reputation: 2480

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');

Upvotes: 0

Al-Noor Ladhani
Al-Noor Ladhani

Reputation: 2433

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.

Upvotes: 1

Abhishek K. Upadhyay
Abhishek K. Upadhyay

Reputation: 1032

A possible solution to this is to apply directly the font-size style to the editor div using jQuery

$('.active-textcontainer').summernote({
    toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']]
    ],
     height:150
});

$('.note-editable').css('font-size','18px');

More .. How to set font-size in summernote?

Thanks

Upvotes: 13

Related Questions