如何快速上手 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');

🌟 实用插件扩展

特殊字符插件

public/plugin/specialchars/ 提供了特殊字符插入功能，支持数学符号、希腊字母等。

数据基础插件

public/plugin/databasic/ 扩展了数据操作能力。

📊 示例和演示

项目提供了丰富的示例代码，位于 examples/ 目录，包括：

代码高亮示例：examples/codemirror.html
多标签对话框：examples/ondialog-multitab.html
自定义样式：examples/custom-style.html

🛡️ 安全注意事项

重要提醒：代码视图允许用户输入脚本内容，务必在服务器端对 HTML 进行过滤和清理，防止 XSS 攻击。

💡 最佳实践建议

响应式设计 - Summernote 完全支持响应式布局
移动端优化 - 在移动设备上表现良好
主题定制 - 可通过 CSS 轻松定制外观
性能优化 - 轻量级设计，加载速度快

🎉 开始使用吧！

Summernote 是构建现代化 Web 应用的完美选择，无论您是开发博客系统、内容管理系统还是在线文档工具，它都能提供出色的编辑体验。

通过简单的三步安装，您就能获得一个功能完整的富文本编辑器。立即尝试 Summernote，提升您的项目用户体验！ 🚀

官方源码地址：https://gitcode.com/gh_mirrors/su/summernote

summernote

Super Simple WYSIWYG Editor

项目地址：https://gitcode.com/gh_mirrors/su/summernote

登录后查看全文