wangEditor v5 不依赖 Bootstrap，与之共存需避免样式冲突：Bootstrap CSS 必须在 wangEditor CSS 之后加载，禁用其全局 box-sizing 重置，工具栏和编辑器容器须为独立 DOM 节点且不可嵌套于 Bootstrap 布局类内。
确认 Bootstrap 与 wangEditor v5 的兼容性问题
wangEditor v5 不依赖 jQuery 或 Bootstrap，也不再内置 Bootstrap 样式。如果你看到老教程里用 $('#divEditor').wangEditor({}) 或引入 bootstrap.min.js 才能启动，那用的是 v3/v4；v5 是纯原生 JS 实现，和 Bootstrap 共存时需手动对齐样式、避免 class 冲突。
常见错误现象：toolbar-container 被 Bootstrap 的 .btn 或 .form-control 样式覆盖，按钮变大、间距错乱；editor-container 高度塌陷或滚动异常。
- 确保 Bootstrap CSS 在 wangEditor CSS 之后 加载，防止其
.w-e-toolbar .w-e-button被覆盖 - 禁用 Bootstrap 的全局 box-sizing 重置影响（如有）：给编辑器容器加
box-sizing: border-box !important - 不要在
#toolbar-container或#editor-container上直接加class="row"或class="form-group"—— 这些会干扰内部 flex 布局
用 HTML + CDN 快速集成（适合非构建项目）
适用于纯静态页、Bootstrap 管理后台、或不想配构建工具的场景。注意 CDN 地址必须匹配 v5 版本（2026 年最新稳定版是 @wangeditor/editor@5.1.23）。
关键点：工具栏和编辑器容器必须是两个独立 DOM 节点，且不能嵌套在 Bootstrap 的 .input-group 或 .card-body 内部（除非显式重置 padding/margin）。
<!-- Bootstrap 5 CSS（推荐）-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- wangEditor v5 样式（必须在 Bootstrap 之后）-->
<link href="https://unpkg.com/@wangeditor/editor@5.1.23/dist/css/style.css" rel="stylesheet">
<p><div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- 工具栏容器 -->
<div id="toolbar-container" class="border rounded-top p-2"></div>
<!-- 编辑器容器（高度需显式设置）-->
<div id="editor-container" class="border rounded-bottom" style="height: 400px"></div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">预览</div>
<div id="preview-output" class="card-body"></div>
</div>
</div>
</div>
</div></p><p><!-- wangEditor JS（放在 body 底部）-->
<script src="<a href="https://www.php.cn/link/c60b8bbdd75b626e859445baade7e469">https://unpkg.com/@wangeditor/editor@5.1.23/dist/index.js"></script></a>;
<script>
const { createEditor, createToolbar } = window.wangEditor
const editor = createEditor({
selector: '#editor-container',
html: '<p>欢迎使用</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>',
config: {
placeholder: '请输入内容...',
MENU_CONF: { uploadImage: { server: '/api/upload' } }
}
})
const toolbar = createToolbar({
editor,
selector: '#toolbar-container'
})
</script>Vue3 项目中与 Bootstrap 组件共存的要点
如果你用的是 BootstrapVue / BootstrapVue3 或手写 Bootstrap 类名，@wangeditor/editor-for-vue 并非必需 —— v5 官方推荐直接用原生 createEditor + ref 挂载，更可控。
容易踩的坑：v-if 切换 tab 时未销毁 editor 实例，导致重复初始化、内存泄漏；editor.destroy() 调用时机不对，报 Cannot read property 'isDestroyed' of null。
- 在
onBeforeUnmount中调用editor.destroy()，不是onUnmounted - 不要把
editor-container放在<b-tab></b-tab>或<b-collapse></b-collapse>内部 —— 显示前容器尺寸为 0，导致光标定位失败 - 若使用
<b-form-textarea></b-form-textarea>做回退方案，注意它和 wangEditor 的 value 同步逻辑要单向（编辑器 → textarea），避免双向绑定冲突
图片上传后样式错位或弹窗被遮挡
Bootstrap 的 z-index 默认值（如 modal 是 1055）常高于 wangEditor 的上传弹窗（默认 z-index 1000），导致点击无响应或按钮不可见。
这不是 bug，是层叠上下文叠加顺序问题。最稳妥解法是局部提升编辑器浮层层级，而非全局改 Bootstrap 变量。
- 在 CSS 中加：
.w-e-popover, .w-e-upload-img-panel { z-index: 1100 !important; } - 上传配置里禁用 inline 模式：
config: { MENU_CONF: { uploadImage: { base64: false, customUpload: true } } }，避免与 Bootstrap 的.modal冲突 - 如果用了 Bootstrap 的
data-bs-toggle="modal"触发器，确保它没绑定到#toolbar-container内部任意节点上
实际集成中最容易被忽略的，是编辑器容器的 height 必须为具体数值（如 400px 或 calc(100vh - 200px)），百分比高度在 flex 容器中会失效 —— 这和 Bootstrap 的栅格无关，是 CSS 渲染规则本身决定的。
