Summernote 設置默認字體大小和字體

Question

我正在使用最新版本的 Summernote 庫。 我如何設置默認字體大小和字體？ 我正在嘗試這樣，但它不起作用：

 $('.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/

Answer 1

一個可能的解決方案是使用 jQuery 將字體大小樣式直接應用於編輯器 div

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

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

更多.. 如何在summernote中設置字體大小？

謝謝

Answer 2

將此 CSS 添加到您自己的 CSS 文件以覆蓋 summernote.css 中的設置：

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

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

注意。 在這個例子中，我使用了下面的 summernote 初始化：

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

當然，您需要通過 CSS 加載所有這些字體。

Answer 3

如果你的編輯器沒有運行簡單的文本，你需要綁定一些東西來工作。 將此代碼添加到您的summernote

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

Answer 4

這似乎有效

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

Answer 5

我注意到使用 $('.note-editable').css('font-size','18px') 接縫導致頁面在加載時關注注釋，在我的情況下導致頁面滾動到每次都在底部。

在summernote.css中，添加font-size: 16px； to .note-editor似乎沒有滾動問題。

只要確保這是在你的summernote.css

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