如何为Summernote编辑器工具栏添加自定义字号列表？

我来帮你搞定这个自定义Summernote字号的问题～你之前的配置方式不对，所以才会出现要么不生效、要么只显示13号的情况。

问题原因 #

Summernote的fontsize按钮不是直接把字号数值写在toolbar的配置数组里，而是需要先通过fontSizes选项预先定义好你想要的字号列表，然后在toolbar里调用fontsize按钮来加载这个列表。

正确配置方法 #

你需要在Summernote的初始化参数里添加fontSizes选项，把自定义的字号值传进去，然后toolbar里保留['fontsize', ['fontsize']]即可：

<script>
  $(document).ready(function() {
    $('#image_body').summernote({
      // 预先定义自定义字号列表
      fontSizes: ['8', '9', '10', '11', '12', '14', '18'],
      toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']], // 调用字号选择按钮
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']]
      ]
    });
  });
</script>

补充说明 #

• fontSizes里的数值可以是字符串或数字，Summernote会自动渲染成对应的字号选项
• 如果需要带单位（比如px），也可以写成['8px', '9px', ...]，不过默认不带单位的话会使用pt作为单位（Summernote默认字号单位是pt）

这样配置之后，你的Summernote编辑器就能显示你自定义的8、9、10、11、12、14、18号字号选项啦～

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