Summernote 富文本编辑器 v0.9.1

Bootstrap 官方没有提供富文本编辑器，Summernote 是与 Bootstrap 风格一致的所见即所得编辑器。0.9.1 起官方发布 Bootstrap 5 专用构建（summernote-bs5），可直接配合 Bootstrap 5.3 使用；注意它仍依赖 jQuery 3.x。

官方对照

先看 Bootstrap 官方能做什么、本库补齐了什么。

官方没有

对比维度	Bootstrap 官方	Summernote
能力定位	仅 `.form-control` 纯文本 `<textarea>`，无任何格式化能力	所见即所得富文本编辑器，产出 HTML 片段
核心特性	只能输入纯文字	格式化工具栏、插入链接/图片/视频、代码视图、弹窗编辑、工具栏可完全自定义
依赖与体积	零依赖	jQuery 3.x（必需） + Bootstrap CSS/JS；本地图片默认以 Base64 内嵌，无需上传接口
适用场景	留言、备注等纯文本输入	公告、文章、商品描述等需要排版的富文本场景
与 Bootstrap 5.3	原生支持	0.9.1 的 `summernote-bs5.*` 兼容 BS5；旧版 0.8.x 仅支持 BS4，勿混用；jQuery 4 未验证，建议固定 3.7.x

对照表说明

结论：Bootstrap 官方「没有」富文本编辑器组件，需要排版能力时选用 Summernote；
本页示例使用 0.9.1 的 bs5 构建，已在 Bootstrap 5.3.8 下真实渲染验证。

引入方式

通过 jsDelivr 固定版本引入。依赖顺序必须是：jQuery → Bootstrap bundle（已内置 Popper，无需再单独引 popper.js）→ summernote-bs5.js → 中文语言包。样式 summernote-bs5.min.css 放 <head>。

引入代码

<!-- 样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.css" rel="stylesheet">

<!-- 脚本：jQuery 必须最先加载 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- Bootstrap bundle 已内置 Popper，无需单独引入 popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.js"></script>
<!-- 中文界面（工具栏按钮、弹窗提示汉化） -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/lang/summernote-zh-CN.min.js"></script>

基础示例

在一个空 <div> 上调用 $(…).summernote() 即完成初始化。下方编辑器已真实渲染，可直接输入、选中文字后加粗、插入链接或图片（本地图片自动转为 Base64 内嵌）。

文章正文

在这里输入正文。选中这段文字，可以用上方工具栏加粗、加链接；也可以直接粘贴一张图片进来。

HTML + 初始化 JS

<div id="sn-basic"></div>

<script>
$(function () {
  $('#sn-basic').summernote({
    height: 220,          // 编辑区高度
    lang: 'zh-CN',         // 配合上方语言包显示中文
    placeholder: '请输入内容……'
  });
});
</script>

自定义工具栏

通过 toolbar 选项裁剪工具栏：每组为 [组名, [按钮列表]]，不需要的按钮直接删除即可。下方编辑器只保留了加粗/斜体/下划线、删除线、列表和链接/图片。

精简工具栏编辑器

HTML + 初始化 JS

<div id="sn-toolbar"></div>

<script>
$(function () {
  $('#sn-toolbar').summernote({
    height: 180,
    lang: 'zh-CN',
    toolbar: [
      ['style',   ['bold', 'italic', 'underline', 'clear']],
      ['font',    ['strikethrough', 'superscript', 'subscript']],
      ['para',    ['ul', 'ol']],
      ['insert',  ['link', 'picture']]
    ]
  });
});
</script>