layui.css被富文本CSS覆盖导致样式污染，主因是加载顺序不当和选择器权重过高；需确保layui.css优先加载、隔离容器、清理全局浮层、手动同步表单验证、清洗非法标签。
检查 layui.css 是否被富文本编辑器的 CSS 覆盖
layui 的样式污染常不是 DOM 结构问题，而是 CSS 优先级失控。UEditor 和 TinyMCE 都自带大量内联 style 和高权重选择器（比如 .edui-default .edui-editor 或 .tox-tinymce），一旦它们的 CSS 文件在 layui.css 之后加载，就可能覆盖 .layui-btn、.layui-form-item 等关键类的边距、字体、行高甚至 display 属性。
实操建议：
- 打开开发者工具 → Elements 面板，选中一个被“变样”的 layui 按钮，看 computed 样式里哪些规则来自
ueditor.min.css或tinymce.min.css - 确认 CSS 加载顺序：必须保证
layui.css在所有富文本 CSS 之前引入；若用layui.use()动态加载，需确保富文本 CSS 不通过link标签异步插入 - 对富文本容器加隔离类，例如：
<div id="editor-container" class="layui-unselect">，并配合scoped或属性选择器重置子元素继承样式
排查富文本初始化时对全局 DOM 的副作用
TinyMCE 5.x 默认会向 document.body 注入 <div class="tox tox-tinymce-aux">，UEditor 会挂载 <div class="edui-dialog"> 到 body 底部——这些浮层节点如果未清除，会干扰 layui 的弹窗（layer.open）、下拉（lay-select）的 z-index 和定位计算，导致遮挡或错位。
实操建议：
- 在富文本销毁时手动清理：TinyMCE 调用
tinymce.get('editor-id')?.remove()；UEditor 调用UE.getEditor('editor-id')?.destroy()，再执行$('body > .edui-dialog, body > .tox-tox').remove() - 禁止 UEditor 自动挂载浮层：初始化时传
{autoFloatEnabled: false}；TinyMCE 加aria-hidden="true"并限制menubar: false减少辅助节点 - 检查是否触发了 layui 的
layui.setter重置逻辑：某些富文本插件会修改document.documentElement.style.fontSize，间接影响 layui 响应式计算
验证 layui 表单模块是否因富文本 DOM 结构失效
layui 的 form.verify 只监听 input/textarea 的 change 和 blur 事件，但 UEditor/TinyMCE 的内容实际存在 div[contenteditable] 或 iframe 中。若你给富文本容器加了 lay-verify="required" 却没生效，不是配置漏了，而是 layui 根本没注册监听目标。
实操建议：
- 不要给富文本容器设
lay-verify，改用form.verify()手动注册规则，例如：content: function(value, item) { return !$(item).find('.mce-content-body').html()?.trim() ? '正文不能为空' : null; } - 为兼容旧逻辑，可在富文本
init_instance_callback（TinyMCE）或ready（UEditor）回调里，把 HTML 同步进隐藏<textarea name="content_sync" class="layui-hide"></textarea>，再对该textarea设lay-verify="required" - 注意 TinyMCE 的
setup回调中，editor.on('NodeChange', ...)比onChange更可靠，能捕获光标进出、粘贴、格式切换等全部内容变动
识别富文本插入的非法标签对 layui 渲染的破坏
UEditor 默认过滤掉 <style>、<script>，但放行 <font>、<o:p>、<v:roundrect> 等 Word 导出残留标签；TinyMCE 若未配 valid_elements，也会保留微信文章里的 <section style="margin:0;padding:0">。这些标签虽不报错，但会撑开 .layui-form-item 的高度、干扰 layui.form.render() 对子元素的尺寸测量，导致表单错位或提交按钮被顶出视口。
实操建议：
- 在富文本
beforepaste（UEditor）或PreProcess（TinyMCE）钩子里拦截并清洗：用DOMParser解析 HTML 字符串，遍历移除font、o:p、v:命名空间标签，清空非白名单style属性 - 避免用正则替换，例如
html.replace(/<font>]*>/gi, '')</font>会漏掉自闭合写法或嵌套注释；必须走 DOM 树遍历 - 对 layui 表单容器加
overflow: hidden和max-height临时兜底，防止非法标签意外撑开布局
