如何在Summernote中设置默认字体为Arial、字号为11px？

1. 优先级更高的CSS样式（覆盖编辑区及表格） #

使用更具体的选择器确保样式优先级高于Summernote默认样式，同时覆盖表格内元素：

/* 编辑器编辑区域默认样式 */
.note-editor.note-frame .note-editable {
  font-family: Arial, sans-serif;
  font-size: 11px;
}

/* 编辑器内表格及单元格样式 */
.note-editor.note-frame .note-editable table,
.note-editor.note-frame .note-editable table td,
.note-editor.note-frame .note-editable table th {
  font-family: Arial, sans-serif;
  font-size: 11px;
}

2. 初始化时通过回调设置默认格式 #

在Summernote初始化配置中加入onInit回调，确保编辑器就绪后再设置默认字体和字号（注意调用正确的API方法）：

$('textarea#summernote').summernote({
  placeholder: 'Conteúdo da Capa do Processo',
  tabsize: 2,
  height: 300,
  lang: "pt-BR",
  fontSizeUnits: ['pt', 'px', 'vw'],
  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['table', ['table']],
    ['fontname', ['fontname']],
  ],
  // 编辑器初始化完成后执行
  onInit: function() {
    const editor = $(this);
    editor.summernote('fontName', 'Arial');
    editor.summernote('fontSize', '11px');
  }
});

为什么之前的代码未生效？ #

• CSS优先级问题：原选择器.note-editor .note-editable优先级不足，被Summernote内置样式覆盖，使用.note-editor.note-frame .note-editable可提升优先级。
• API方法误用：原代码中fontSizeUnit是配置字号单位选项的方法，而非设置具体字号，正确方法为fontSize。
• 执行时机错误：直接在初始化外部调用JS方法时，编辑器可能未完全加载，放入onInit回调可确保执行时机正确。
• 未覆盖表格样式：默认表格元素可能未继承编辑区样式，需单独指定表格及单元格的字体规则。

内容的提问来源于stack exchange，提问作者Lucas Silva