bootstrap-wysiwyg是专为Bootstrap设计的轻量级富文本编辑器，基于execCommand API实现，体积仅5KB、代码不到200行，提供所见即所得编辑功能，需手动配置样式以确保编辑区渲染正常。
Bootstrap 不是“编辑器”，它本身不提供 HTML 编辑功能；你真正要集成的是一个支持 Bootstrap 样式和组件的富文本编辑器（比如 bootstrap-wysiwyg），或在已有编辑器（如 CodeMirror、TinyMCE）里启用 Bootstrap UI。直接往纯 textarea 或 div[contenteditable] 里加 Bootstrap class 是无效的——样式不会自动注入到编辑区域内部。
为什么 bootstrap-wysiwyg 的编辑区没样式？
常见现象：工具栏按钮显示正常，但点击后编辑区域仍是白底黑字、无边框、滚动条丑陋、字体大小不对。
- 根本原因：编辑器容器（如
<div id="editor"></div>）默认没有 Bootstrap 的排版基线（body级 reset 和 typography 规则） -
bootstrap-wysiwyg只负责工具栏和命令逻辑，不接管编辑内容的渲染样式 - 必须手动给编辑容器添加
class="form-control"或包裹进<div class="mb-3">，并确保其继承font-size、line-height、padding等 - 若用
container-fluid或row包裹编辑器，注意不要让 flex 布局干扰contenteditable的高度计算
bootstrap.bundle.min.js 必须加载，且顺序不能错
错误示范：<script src="bootstrap.min.js"></script> —— 这个文件不含 Popper，所有下拉、模态框、tooltip 类交互组件都会静默失效。
- Bootstrap 5+ 所有 JS 组件（包括编辑器触发的 dropdown 菜单）依赖内置 Popper，只能靠
bootstrap.bundle.min.js提供 - 引入位置必须在
</body>闭合前，且在 jQuery 之后（仅 Bootstrap 4 及更早需 jQuery；Bootstrap 5 不需要，但若项目已用 jQuery，别让它覆盖bootstrap.Modal实例） - CDN 地址务必完整：例如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js，漏掉@5.3.3或写成相对路径会导致 404
栅格嵌套结构塌了，编辑器布局错位
把 bootstrap-wysiwyg 放进 Modal 后，工具栏挤成一行、编辑区被裁剪、响应式断点失效——大概率是容器结构违规。
立即学习“前端免费学习笔记（深入）”；
- Modal 内部必须严格遵循
container → row → col-* → [editor container]，跳过row会导致 flex 不生效，col-12也撑不满 - 避免在编辑容器上直接写
style="height: 300px;"，改用class="h-75"或min-height: 200px配合overflow-y: auto - 如果 Modal 使用
modal-dialog-centered，确认编辑器容器未被transform: translate()截断滚动区域
最易忽略的一点：编辑器内容（HTML 片段）本身不受 Bootstrap CSS 影响——你输入的 <h2>标题</h2> 不会自动带 margin 和 font-weight，除非你在全局 CSS 里为 #editor h2 单独定义，或把编辑区设为 iframe 并注入 Bootstrap CSS 到其 document 中。
