富文本编辑器生成的HTML段落标签（<p>）不应嵌套在冗余<div>容器中，因<p>本身是块级语义元素，直接使用即可；额外包裹<div>违背语义化原则，且可能干扰样式与可访问性。
富文本编辑器生成的 HTML 段落标签（<p>）常被嵌套在冗余容器中，比如 <div><p>...、<p><span style="font-size:14px">...，甚至混入 Word 导出的 <o:p> 或微信复制的 <font> 标签。单纯保留 <p> 不够，关键是要让段落结构干净、语义清晰、可维护。
只留语义化段落，剥离包裹容器
很多编辑器默认把粘贴内容塞进 <div> 或 <section> 里，导致 <p> 被多层包裹。处理时应优先提取纯段落内容，而不是保留外层“壳”：
- 用 DOM 解析（如
document.createElement('template')）加载 HTML，再遍历所有<p>节点，用textContent提取文字，或用innerHTML保留基础内联格式（<strong>、<em>） - 避免正则直接删
<div>—— 容易误删有实际语义的容器（如图文混排区），应按节点类型+是否为空来判断是否移除 - 对空
<p></p>或仅含空白符的段落，统一过滤掉，防止页面出现多余空白行
统一段落样式，清除内联 font/span/align
用户从 Word 或网页复制时，<p> 常带 style="text-align:center"、<span style="color:red"> 等内联样式，破坏样式一致性。这类属性不应靠 CSS 覆盖，而应在入库前清理：
- 白名单式清洗：只允许
<p>保留class（用于语义分类，如class="lead"），禁用style、align、data-*等非标准属性 - 用 Hutool 的
removeHtmlAttr(html, "style")或 JS 的el.removeAttribute('style')批量清除，比正则更可靠 - 对
<font>、<span>包裹的文字，按语义降级：<font color="red">→ <span class="text-red">，或直接转为纯文本（视业务需求）
段落间逻辑合并与换行规范化
编辑器常把回车渲染成多个 <p>，或把软换行（<br>）和段落混用，造成结构松散。需统一段落边界逻辑：
立即学习“前端免费学习笔记（深入）”；
- 连续多个空
<p>或仅含<br>的段落，合并为单个空段落或直接删除 - 将孤立
<br>（不在<p>内）提升为段落分隔符，转成<p></p> - 服务端存数据时，建议不用原始 HTML 存段落，改用 Delta（Quill）、Markdown（Tiptap）或自定义 JSON 结构，天然规避标签混乱问题
前端实时拦截，从源头减少杂乱
等内容进编辑器再清洗，已增加 DOM 渲染负担和 XSS 风险。应在粘贴瞬间就规范段落结构：
- 监听
paste事件，用event.clipboardData.getData('text/html')获取原始 HTML，解析后只保留<p>、<h2>、<ul>等白名单标签 - Quill 中配置
clipboard.matchers，为'p'节点指定统一处理器，自动抹除style并标准化 class - TinyMCE 启用
paste_as_text: true或自定义paste_preprocess，把粘贴内容先过一遍 DOM 清洗再插入
