h5富文本表单中段落级自定义校验提示需识别段落为独立语义单元，统一提取段落节点、绑定独立校验状态、失焦或防抖后触发校验，并在段落旁精准注入带无障碍支持的提示元素，同时用mutationobserver同步管理提示生命周期。
在 H5 富文本表单中实现段落级自定义校验提示，核心是绕过编辑器的黑盒渲染逻辑，把「段落」识别为可独立校验的语义单元，并将提示精准锚定到对应 DOM 节点上。关键不在于监听整个 contenteditable，而在于解析结构、绑定校验、动态注入提示。
识别并标准化段落边界
富文本（如 Quill、Tiptap、或者原生 contenteditable）中，“段落”未必对应 <p></p> 标签——可能混用 <div>、<code><br> 换行、甚至无标签纯文本块。需统一提取段落节点：
- 对 Quill：用
quill.getContents()获取 Delta，遍历 ops，按attributes.paragraphId或换行符（\n）切分；或监听text-change后用quill.root.querySelectorAll('p, div[role="paragraph"], [data-block="true"]')定位真实段落容器 - 对 Tiptap：直接操作 NodeView 或用
editor.state.doc.descendants()遍历，筛选type.name === 'paragraph'的节点，再通过view.nodeDOM(nodePos)获取对应 DOM 元素 - 对原生 contenteditable：用
getSelection().anchorNode.parentElement结合querySelectorAll('p, div[data-paragraph], br + *')+ 文本节点分割逻辑，建立段落索引映射表（例如 {0: p1, 1: p2, ...}）
为每段绑定独立校验规则与状态
避免全局校验后统一渲染提示。应为每段维护独立校验状态对象，例如：
{ "p_001": { valid: false, message: "首段必须包含至少一个动词", level: "error" }, "p_002": { valid: true } }
校验触发时机建议：
- 段落失去焦点时（
blur事件委托到段落容器） - 输入停顿 800ms 后（防高频抖动）
- 提交前全量触发（
validateAllParagraphs()）
校验函数接收段落 DOM 或文本内容，返回结构化结果，不直接操作 UI。
在段落旁/内精准插入校验提示
提示不能悬浮在页面中央，必须视觉关联到具体段落。推荐两种轻量方案：
-
行尾图标 + Tooltip：在段落末尾
insertAdjacentHTML('beforeend', '<span class="para-validate-icon" data-level="error" title="首段必须包含至少一个动词">⚠️</span>')，配合 CSSposition: relative+::after实现气泡提示 -
段落底部浮动提示条：在段落 DOM 下方动态插入
<div class="para-hint error">⚠️ 首段必须包含至少一个动词</div>，CSS 设为margin-top: 4px; font-size: 12px; padding: 2px 6px;，避免影响布局流
注意：提示元素需加 aria-live="polite"，支持读屏器；错误段落建议加 tabindex="-1" 并在聚焦时自动滚动到视口。
处理编辑过程中的提示同步与清理
用户修改、删除、合并段落时，提示容易残留或错位。必须建立生命周期管理：
- 段落被
split（回车）时：复制原提示状态到新段，重置原段校验为 pending - 段落被
merge（删掉换行）时：合并两条提示（取更严重级别），或清空，触发重新校验 - 段落被删除时：移除对应 DOM 提示节点，并从校验状态 Map 中 delete key
- 使用 MutationObserver 监听段落容器子节点变化，自动响应结构变更
