如何快速上手 Summernote：超级简单的在线富文本编辑器完整指南

2026-02-05 04:23:26作者：盛欣凯Ernestine

Summernote 是一个超简单的 WYSIWYG（所见即所得）编辑器，专为开发者和普通用户设计，让富文本编辑变得轻松愉快 🎯。这款基于 jQuery 的编辑器具有直观的界面和强大的功能，支持 Bootstrap 3、4、5，是构建现代化 Web 应用的理想选择。

✨ 为什么选择 Summernote 编辑器？

Summernote 提供了几个独特优势：

简单易用的用户界面 - 即使是新手也能快速上手
一键安装部署 - 只需包含 JS/CSS 文件即可使用
完美兼容 Bootstrap - 支持 Bootstrap 3、4、5 所有版本
丰富的插件生态系统 - 扩展功能无限可能
智能图片处理 - 自动 base64 编码，无需额外管理

🚀 三步快速安装指南

第一步：引入依赖文件

在 HTML 文件的 <head> 标签中添加以下代码：

<!-- 引入 jQuery 和 Bootstrap -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 引入 Summernote -->
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>

第二步：创建编辑器容器

在页面 body 中添加一个 div 元素：

<div id="summernote">欢迎使用 Summernote！</div>

第三步：初始化编辑器

使用 JavaScript 初始化 Summernote：

$(document).ready(function() {
  $('#summernote').summernote();
});

🎯 核心功能特性详解

丰富的文本格式化工具

Summernote 提供了完整的文本编辑功能，包括：

字体样式（粗体、斜体、下划线）
段落对齐和缩进
列表和编号
链接和图片插入
表格创建和编辑

智能图片处理

图片自动转换为 base64 编码，无需额外服务器存储，简化了开发流程。

多语言支持

项目内置了 40+ 种语言包，包括中文、英文、日文、韩文等，满足国际化需求。语言文件位于 public/lang/ 目录。

🔧 高级配置技巧

自定义工具栏

您可以根据需要自定义工具栏按钮：

$('#summernote').summernote({
  toolbar: [
    ['style', ['bold', 'italic', 'underline']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['insert', ['link', 'picture']]
  ]
});

使用 API 操作内容

Summernote 提供了丰富的 API：

// 获取编辑器内容
var html = $('#summernote').summernote('code');

// 设置编辑器内容
$('#summernote').summernote('code', '<p>新内容</p>');

// 禁用/启用编辑器
$('#summernote').summernote('disable');
$('#summernote').summernote('enable');