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 将 font-size 样式直接应用到编辑器 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('fontName', 'Arial');
        $('#summernote').summernote('fontSize', '12');

Answer 4

如果您的编辑器不运行简单文本，您需要绑定一些东西才能工作。 将此代码添加到您的 Summernote 中

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

Answer 5

我注意到使用 $('.note-editable').css('font-size','18px') 接缝会导致页面在加载时聚焦于注释，在我的情况下导致页面滚动每次都到底部。

在 Summernote.css 中，将 font-size: 16px; 添加到 .note-editor 似乎可以解决滚动问题。

只要确保它在你的 Summernote.css 中

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

Answer 6

尝试对多个文本区域使用此方法。

$(".html-editor").each(function(){ $(这个).summernote({ 宽度：“95%”， 高度：“自动”， 最大高度：“100%”， 最大宽度：“95%”， 工具栏：[ ['风格'，['风格']]， ['字体', ['粗体', '斜体', '下划线', '上标', '下标', '删除线', '清除']], ['字体名称', ['字体名称']], ['字体大小', ['字体大小']], ['颜色', ['颜色']], ['para', ['ul', 'ol', 'paragraph']], ['高度', ['高度']], ['表'，['表']]， ['插入', ['链接', '图片', '视频', '小时']], ['视图', ['代码视图']] ], }); $(this).summernote('字体大小',12); $(this).summernote('fontName', 'Arial'); });