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

更多..How to set font-size in 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; 添加到 .note-editor 似乎可以解决问题没有滚动问题。

只需确保它在您的 summernote.css

中

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

Summernote 设置默认字体大小和字体

Summernote set default font size and font

javascript

summernote