bootstrap-wysiwyg是专为Bootstrap生态设计的轻量级富文本编辑器，仅5KB、不足200行代码，不污染HTML、不强制样式，通过data-edit属性直连浏览器原生API实现排版功能。
直接用 bootstrap-wysiwyg 就行，别绕路
它不是“基于 Bootstrap 做的富文本”，而是专为 Bootstrap 生态设计的轻量级编辑器——5KB、不到 200 行代码、不污染 HTML、不强制样式。你不需要重写工具栏逻辑或 hack execCommand，只要引入、声明容器、初始化，就能拿到一个带排版功能（标题、列表、对齐、缩进）的编辑区。其他方案如 Summernote 或 UEditor 在后台管理场景里反而容易因体积大、配置杂、移动端 toolbar 错位等问题拖慢交付。
data-edit 属性决定排版能力，不是 CSS 类
工具栏按钮的功能完全由 data-edit 的值驱动，比如：data-edit="formatBlock" 控制段落类型，data-edit="insertUnorderedList" 插入无序列表。它不靠 class 名或 JS 绑定事件来实现排版，而是直连浏览器原生 API。
-
data-edit="formatBlock"后必须跟参数，例如data-edit="formatBlock <h2>"</h2>（注意空格和尖括号要 HTML 实体化：<h2>） - 对齐操作用
data-edit="justifyLeft"/justifyCenter/justifyRight，不是text-left这类 Bootstrap 类 - 缩进依赖
data-edit="indent"和data-edit="outdent"，它们作用于块级元素（<p></p>、<ul></ul>），不是内联样式 - 如果点击后没反应，先检查是否漏了
jquery.hotkeys.js—— 它负责拦截 Ctrl+Shift+L 这类组合键，而部分排版命令（如居中）默认绑定了快捷键，没它就只响应 toolbar 点击
排版输出的 HTML 很“干净”，但有隐藏陷阱
bootstrap-wysiwyg 不生成 <span style="text-align:center"></span> 这种冗余内联样式，而是用语义化标签 + 标准属性，比如居中段落会输出 <p style="text-align:center"></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，列表是标准 <ul><li></ul>。这有利于后端解析和 SSR 渲染，但也带来两个实际问题：
- 移动端下，
text-align:center在 flex 容器里可能失效 —— 编辑器容器父级若用了d-flex或justify-content-between，需额外加style="text-align: inherit"重置 - 空行会被转成
<p><br></p>，而不是<p></p>，某些 CMS 解析器会把<br>当作内容，导致多出空白段落；可初始化时加cleanAttrs: ['class', 'style']并配合后端 strip<br>处理 - 它不自动 wrap 内容在
<div class="content"> 里 —— 如果你依赖 Bootstrap 的 <code>.text-muted或.lead控制渲染样式，得自己给输出 HTML 包一层容器再应用 class别在
$('#editor').wysiwyg()里硬塞排版逻辑初始化函数不接受“设置默认标题级别”或“禁用斜体”这类高级排版参数。所有排版行为都由 toolbar 的
data-edit按钮触发，或由用户快捷键输入驱动。想限制排版能力？删掉对应按钮就行；想改默认段落格式？在容器上设data-placeholder="正文"并用 CSS 配合#editor p:first-child初始化样式，而不是试图 patch 插件源码。最常被忽略的一点：它没有“段落样式下拉菜单”这种高级控件 —— 所有 formatBlock 操作都得靠多个按钮（
<h1></h1>、<h2></h2>、<p></p>）并排实现，不能像 Word 那样点一下弹出菜单选。如果你的后台要求支持 6 级标题 + 引用块 + 代码块，得手动补全 7 个data-edit="formatBlock ..."按钮，并确保图标语义清晰（比如引用块用<i class="fa fa-quote-left"></i>）。
