告别编辑器适配烦恼：Summernote与Bootstrap全版本整合指南

你是否曾为富文本编辑器在不同前端框架下的显示错乱而头疼？是否在Bootstrap 3升级到Bootstrap 5时，被迫重构整个编辑界面？Summernote（超级简单的所见即所得编辑器）通过与Bootstrap深度整合，提供了从BS3到BS5的无缝适配方案。本文将带你掌握三种主流Bootstrap版本的整合技巧，5分钟内搭建专业级响应式编辑界面。

版本适配概览

Summernote针对Bootstrap各版本提供了专用样式包和初始化方案，确保在不同版本中保持一致的用户体验。项目结构中，这些适配代码集中在src/styles/目录下：

• Bootstrap 3适配：src/styles/bs3/
• Bootstrap 4适配：src/styles/bs4/
• Bootstrap 5适配：src/styles/bs5/

每个版本目录都包含SCSS样式文件和JS渲染逻辑，通过模块化设计实现版本间的差异化处理。

快速集成步骤

Bootstrap 3整合

1. 引入依赖资源

<!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>

<!-- 引入Bootstrap 3 -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>

<!-- 引入Summernote BS3版本 -->
<script type="module" src="/src/styles/bs3/summernote-bs3.js"></script>

2. 初始化编辑器

$(document).ready(function() {
  $(".summernote").summernote({
    height: 400,         // 编辑区域高度
    tabsize: 2,          // 制表符大小
    followingToolbar: true  // 跟随滚动的工具栏
  });
});

完整示例文件：examples/summernote-bs3.html

Bootstrap 4整合

Bootstrap 4引入了卡片组件和弹性布局，Summernote相应调整了容器结构：

<!-- Bootstrap 4特有依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<!-- 引入Summernote BS4版本 -->
<script type="module" src="/src/styles/bs4/summernote-bs4.js"></script>

初始化代码与BS3基本一致，但内部渲染逻辑已调整为使用.card代替.panel组件：

$('.summernote').summernote({
  height: 400,
  tabsize: 2
});

完整示例文件：examples/summernote-bs4.html

Bootstrap 5整合

Bootstrap 5移除了jQuery依赖，但Summernote仍需jQuery支持，因此引入顺序需特别注意：

<!-- 保持jQuery引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>

<!-- Bootstrap 5资源 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 引入Summernote BS5版本 -->
<script type="module" src="/src/styles/bs5/summernote-bs5.js"></script>

完整示例文件：examples/summernote-bs5.html

核心适配原理

Summernote的Bootstrap适配核心在于UI渲染层的版本差异化处理。以Bootstrap 3的实现为例，src/styles/bs3/summernote-bs3.js定义了特定的DOM结构：

const editor = renderer.create('<div class="note-editor note-frame panel panel-default"></div>');
const toolbar = renderer.create('<div class="panel-heading note-toolbar" role="toolbar"></div>');

而在Bootstrap 4+版本中，这些类名已调整为使用.card相关类。通过renderer.create方法，Summernote实现了不同版本下的界面组件动态生成。

样式方面，各版本SCSS文件通过导入共享样式和版本特定样式实现代码复用：

// Bootstrap 3样式导入
@import '../summernote/font.scss';
@import '../summernote/common.scss';

响应式配置最佳实践

工具栏自适应

通过设置toolbarPosition: 'bottom'可将工具栏移至底部，优化移动端体验：

$('.summernote').summernote({
  toolbarPosition: 'bottom',  // 工具栏位置：top/bottom
  followingToolbar: true      // 滚动时工具栏固定
});

自定义主题

利用各版本的SCSS变量覆盖功能，可快速定制编辑器外观。例如修改Bootstrap 5的工具栏背景色：

// 在summernote-bs5.scss中添加
.note-toolbar {
  background: $primary;  // 使用Bootstrap的主色调变量
}

常见问题解决

1. 图标显示异常：确保正确引入Summernote字体文件，路径配置在src/styles/summernote/font.scss

2. 模态框冲突：当Bootstrap模态框中使用编辑器时，需设置container: 'body'避免样式继承问题

3. 响应式图片：通过自定义配置强制图片自适应容器：

$('.summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // 上传逻辑...
      $(this).summernote('insertImage', url, function($img) {
        $img.addClass('img-fluid');  // 添加Bootstrap响应式图片类
      });
    }
  }
});

版本迁移指南

从低版本Bootstrap迁移时，主要修改点包括：

1. 依赖文件更新：替换Bootstrap CSS/JS链接为目标版本
2. Summernote入口文件：从summernote-bs3.js切换至对应版本
3. 容器类名调整：如.panel替换为.card（参考各版本示例文件）
4. 事件处理变更：Bootstrap 5中模态框事件前缀从bs.改为bs.modal.

项目提供的迁移示例可在examples/目录中找到，包含各版本间的切换链接。

总结与扩展

Summernote通过精心设计的版本适配层，成功实现了与Bootstrap生态的深度整合。无论是需要支持旧系统的Bootstrap 3，还是追求最新特性的Bootstrap 5，开发者都能找到对应的解决方案。

更多高级用法，如代码高亮整合（examples/codemirror.html）和自定义快捷键（src/js/module/Buttons.js），等待你在实际项目中探索。现在就克隆仓库体验：

git clone https://gitcode.com/gh_mirrors/su/summernote

下一篇我们将探讨Summernote插件开发，教你如何为编辑器添加自定义功能按钮。保持关注，让编辑体验更上一层楼！