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

  "

  （注意空格和尖括号要 HTML 实体化：

  ）

• 对齐操作用 data-edit="justifyLeft" / justifyCenter / justifyRight，不是 text-left 这类 Bootstrap 类
• 缩进依赖 data-edit="indent" 和 data-edit="outdent"，它们作用于块级元素（
  、
  ），不是内联样式
• 如果点击后没反应，先检查是否漏了 jquery.hotkeys.js —— 它负责拦截 Ctrl+Shift+L 这类组合键，而部分排版命令（如居中）默认绑定了快捷键，没它就只响应 toolbar 点击

排版输出的 HTML 很“干净”，但有隐藏陷阱

bootstrap-wysiwyg 不生成 这种冗余内联样式，而是用语义化标签 + 标准属性，比如居中段落会输出

，列表是标准

。这有利于后端解析和 SSR 渲染，但也带来两个实际问题：

• 移动端下，text-align:center 在 flex 容器里可能失效 —— 编辑器容器父级若用了 d-flex 或 justify-content-between，需额外加 style="text-align: inherit" 重置
• 空行会被转成

  
  

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  ，而不是
  ，某些 CMS 解析器会把
当作内容，导致多出空白段落；可初始化时加 cleanAttrs: ['class', 'style'] 并配合后端 strip
处理
• 它不自动 wrap 内容在
  里 —— 如果你依赖 Bootstrap 的 .text-muted 或 .lead 控制渲染样式，得自己给输出 HTML 包一层容器再应用 class

  别在 $('#editor').wysiwyg() 里硬塞排版逻辑

  初始化函数不接受“设置默认标题级别”或“禁用斜体”这类高级排版参数。所有排版行为都由 toolbar 的 data-edit 按钮触发，或由用户快捷键输入驱动。想限制排版能力？删掉对应按钮就行；想改默认段落格式？在容器上设 data-placeholder="正文" 并用 CSS 配合 #editor p:first-child 初始化样式，而不是试图 patch 插件源码。

  最常被忽略的一点：它没有“段落样式下拉菜单”这种高级控件 —— 所有 formatBlock 操作都得靠多个按钮（

  、

  、

  ）并排实现，不能像 Word 那样点一下弹出菜单选。如果你的后台要求支持 6 级标题 + 引用块 + 代码块，得手动补全 7 个 data-edit="formatBlock ..." 按钮，并确保图标语义清晰（比如引用块用 ）。