3步打造专属编辑器：Summernote工具栏自定义完全指南-优快云博客

3步打造专属编辑器：Summernote工具栏自定义完全指南

【免费下载链接】summernote Super simple WYSIWYG editor 项目地址: https://gitcode.com/gh_mirrors/su/summernote

你是否还在为编辑器工具栏杂乱无章而烦恼？是否想移除那些永远用不上的按钮，或添加团队专属的快捷功能？本文将通过3个简单步骤，教你如何定制Summernote编辑器的工具栏，让编辑界面既简洁又高效。读完本文后，你将能够：配置基础工具栏、自定义按钮组、实现高级布局，并学会解决常见的兼容性问题。

认识Summernote工具栏

Summernote是一款超简单的所见即所得（WYSIWYG）编辑器，其核心优势在于灵活的定制能力。工具栏作为编辑器最常用的交互区域，默认配置包含了丰富的功能按钮，但往往超出实际需求。通过自定义工具栏，不仅可以简化界面，还能提升编辑效率。

默认工具栏结构

Summernote的默认工具栏配置定义在src/js/settings.js中，包含8个功能组：

toolbar: [
  ['style', ['style']],
  ['font', ['bold', 'underline', 'clear']],
  ['fontname', ['fontname']],
  ['color', ['color']],
  ['para', ['ul', 'ol', 'paragraph']],
  ['table', ['table']],
  ['insert', ['link', 'picture', 'video']],
  ['view', ['fullscreen', 'codeview', 'help']],
]

每个子数组代表一个按钮组，包含组名称和按钮列表。例如['font', ['bold', 'underline', 'clear']]定义了字体相关的按钮组，包含粗体、下划线和清除格式三个按钮。

工具栏工作原理

工具栏的渲染逻辑位于src/js/module/Toolbar.js中，通过initialize()方法构建按钮组：

initialize() {
  this.options.toolbar = this.options.toolbar || [];
  if (!this.options.toolbar.length) {
    this.$toolbar.hide();
  } else {
    this.context.invoke('buttons.build', this.$toolbar, this.options.toolbar);
  }
  // ...
}

按钮的具体实现则在src/js/module/Buttons.js中，通过context.memo('button.<按钮名>')注册，如粗体按钮：

this.context.memo('button.bold', () => {
  return this.button({
    className: 'note-btn-bold',
    contents: this.ui.icon(this.options.icons.bold),
    tooltip: this.lang.font.bold + this.representShortcut('bold'),
    click: this.context.createInvokeHandlerAndUpdateState('editor.bold'),
  }).render();
});

第一步：基础自定义配置

最常见的需求是简化工具栏，只保留常用按钮。通过在初始化时传入toolbar选项，可以完全控制显示的按钮组和按钮。

精简工具栏示例

以下代码创建一个只包含格式化和列表功能的极简工具栏：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>极简Summernote工具栏</title>
  <!-- 国内CDN资源 -->
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/summernote/0.8.18/summernote-bs4.min.css">
  <script src="https://cdn.staticfile.org/summernote/0.8.18/summernote-bs4.min.js"></script>
</head>
<body>
  <div id="summernote"></div>

  <script>
    $(document).ready(function() {
      $('#summernote').summernote({
        height: 300,
        // 自定义工具栏配置
        toolbar: [
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['para', ['ul', 'ol']],
          ['insert', ['link', 'picture']]
        ]
      });
    });
  </script>
</body>
</html>

这个配置只保留了三个按钮组：

格式组：粗体、斜体、下划线、清除格式
段落组：无序列表、有序列表
插入组：链接、图片

可用按钮参考

根据src/js/module/Buttons.js的定义，常用按钮包括：

按钮名称	功能描述
bold	粗体
italic	斜体
underline	下划线
clear	清除格式
fontname	字体选择
fontsize	字号选择
color	颜色选择
ul	无序列表
ol	有序列表
paragraph	段落对齐方式
table	表格
link	插入链接
picture	插入图片
video	插入视频
fullscreen	全屏模式
codeview	代码视图
help	帮助

第二步：高级布局定制

除了控制按钮显示，Summernote还支持更灵活的布局定制，如分离工具栏和编辑器、添加自定义按钮等。

分离工具栏到指定容器

使用toolbarContainer选项可以将工具栏挂载到页面的任意DOM元素，实现更自由的页面布局。examples/toolbar-container.html展示了这种用法：

<div id="toolbar"></div>
<textarea class="summernote"></textarea>

<script>
  $(function() {
    $('.summernote').summernote({
      height: 200,
      toolbarContainer: "#toolbar" // 将工具栏挂载到#toolbar元素
    });
  });
</script>

这种方式特别适合需要自定义编辑器布局的场景，如将工具栏固定在页面顶部或侧边。

添加自定义按钮

虽然Summernote提供了丰富的内置按钮，有时还是需要添加自定义功能。这需要通过注册新按钮和处理点击事件来实现。

注册自定义按钮

首先在初始化时通过buttons选项注册新按钮：

$('#summernote').summernote({
  buttons: {
    myButton: function(context) {
      var ui = $.summernote.ui;
      // 创建按钮
      var button = ui.button({
        contents: '<i class="fa fa-child"/> 自定义',
        tooltip: '我的自定义按钮',
        click: function() {
          // 按钮点击事件处理
          context.invoke('editor.insertText', 'Hello from my button!');
        }
      });
      return button.render();
    }
  },
  // 在工具栏中添加自定义按钮
  toolbar: [
    ['custom', ['myButton']],
    ['style', ['bold', 'italic']]
  ]
});

自定义按钮实现原理

按钮注册的底层实现位于src/js/module/Buttons.js的button()方法：

button(o) {
  if (!this.options.tooltip && o.tooltip) {
    delete o.tooltip;
  }
  o.container = this.options.container;
  return this.ui.button(o);
}

通过ui.button()创建按钮实例，并通过render()方法生成DOM元素。

第三步：完整示例与最佳实践

结合前面介绍的知识，我们来创建一个实用的编辑器配置，包含常用功能且界面简洁。

企业内容编辑配置

以下是一个适合企业内容管理系统的编辑器配置，包含文本格式化、列表、表格和图片功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>企业内容编辑器</title>
  <!-- 国内CDN资源 -->
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/summernote/0.8.18/summernote-bs4.min.css">
  <script src="https://cdn.staticfile.org/summernote/0.8.18/summernote-bs4.min.js"></script>
  <!-- 引入中文语言包 -->
  <script src="public/lang/summernote-zh-CN.js"></script>
</head>
<body>
  <div class="container">
    <h1>企业内容编辑器</h1>
    <div id="toolbar" class="bg-light p-2 mb-3 border rounded"></div>
    <div id="editor" class="border"></div>
  </div>

  <script>
    $(document).ready(function() {
      $('#editor').summernote({
        lang: 'zh-CN',
        height: 400,
        minHeight: null,
        maxHeight: null,
        focus: true,
        toolbarContainer: '#toolbar',
        toolbar: [
          ['format', ['style', 'bold', 'italic', 'underline', 'clear']],
          ['font', ['fontname', 'fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['insert', ['link', 'picture', 'table']],
          ['view', ['fullscreen', 'codeview']]
        ],
        // 自定义字体
        fontNames: ['Arial', '微软雅黑', '宋体', '黑体', '楷体'],
        // 自定义字体大小
        fontSizes: ['8', '10', '12', '14', '16', '18', '24', '36']
      });
    });
  </script>
</body>
</html>

这个配置具有以下特点：

使用国内Staticfile CDN加速资源加载
引入中文语言包public/lang/summernote-zh-CN.js
分离工具栏到独立容器，便于样式定制
精选常用按钮，去除不常用的帮助按钮
自定义中文字体列表，符合国内使用习惯

常见问题解决

按钮图标不显示

确保正确引入了Summernote的字体文件，或检查自定义按钮的图标类名是否正确。图标定义在src/js/settings.js的icons对象中。

工具栏溢出问题

当按钮过多时，工具栏可能会水平溢出。可以通过CSS设置自动换行：

.note-toolbar {
  flex-wrap: wrap;
}

或减少按钮组，只保留最常用功能。

自定义按钮不生效

检查按钮注册名称是否与工具栏配置中的名称一致，以及是否正确实现了click事件处理函数。

总结与扩展

通过本文介绍的方法，你已经掌握了Summernote工具栏的基础和高级定制技巧。从简单的按钮取舍到复杂的布局调整，Summernote提供了灵活的API满足各种需求。

进一步学习资源

官方示例：examples/目录包含各种功能的使用示例
API文档：README.md提供了核心API参考
按钮实现：src/js/module/Buttons.js包含所有内置按钮的实现代码

扩展建议

探索更多自定义选项，如通过popover配置自定义弹出菜单
学习如何通过callbacks选项处理编辑器事件
研究如何开发完整的Summernote插件，扩展编辑器功能

Summernote的灵活性使其能够适应从简单笔记到复杂CMS的各种场景。合理的工具栏定制不仅能提升用户体验，还能减少编辑错误，提高内容创作效率。

希望本文能帮助你打造出最适合自己需求的编辑器界面！如果你有其他定制技巧或问题，欢迎在评论区分享讨论。

【免费下载链接】summernote Super simple WYSIWYG editor 项目地址: https://gitcode.com/gh_mirrors/su/summernote

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考