formatblock 可设置 h1–h6，但浏览器行为不统一：chrome/firefox/edge 需传 ，safari 仅认 h2；它替换整块而非包裹文本，会丢失内联格式与结构，且 execcommand 始终返回 true，无法判断是否生效；mdn 已废弃，推荐用 selection/range api 或 prosemirror 等现代方案替代。
formatBlock 能不能直接设置 h1–h6 标签
能，但行为不统一——execCommand('formatBlock') 在 Chrome/Firefox/Edge 中接受 '<h1>'</h1> 到 '<h6>'</h6> 字符串，Safari 却要求去掉尖括号，只认 'h1'。这意味着同一段代码在 Safari 里会静默失败，光标位置可能错乱，且不抛错。
实操建议：
- 检测浏览器：用
navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')粗略识别 Safari - 对 Safari 使用
execCommand('formatBlock', false, 'h2')，其他浏览器用execCommand('formatBlock', false, '<h2>')</h2> - 别依赖返回值判断是否成功——该方法始终返回
true，即使实际没生效
为什么选中文字后 formatBlock 有时不套标题，而是拆掉父容器
因为 formatBlock 的语义是“将当前块级上下文替换为指定标签”，不是“包裹选中内容”。如果光标在 <p>hello</p> 内，执行 '<h2>'</h2> 会把整个 <p></p> 替换为 <h2>hello</h2>；但如果光标在 <div><span>hello</span></div> 中，它可能生成无效结构（如 <h2><span>hello</span></h2>），而某些浏览器会拒绝并回退到最近合法块级容器（比如变成 <h2>hello</h2> 并丢弃 <span></span>）。
实操建议：
- 调用前先用
getSelection().getRangeAt(0).commonAncestorContainer检查当前块级祖先是否为内联元素（如TEXT_NODE或SPAN），若是，先用document.execCommand('insertParagraph')强制切出新段落再操作 - 避免在富文本嵌套过深（如表格单元格、列表项内部）直接调用；优先提取纯文本内容，重建为干净的
<hx></hx>块
如何让 formatBlock 切换标题时保留原有格式（加粗、颜色等）
不能直接保留——formatBlock 是块级替换操作，会抹掉原节点的所有属性和子节点结构，只保留文本内容。例如 <p><strong>Hi</strong><em>there</em></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/881" title="Luminal"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d51ebc357953.png" alt="Luminal" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/881" title="Luminal" class="overflowclass">Luminal</a>
<p class="overflowclass">Luminal是一款通过自然语言清洗、转换、分析和可视化电子表格的 AI 数据工具。</p>
</div>
<a rel="nofollow" href="/ai/881" title="Luminal" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 执行 '<h3>'</h3> 后变成 <h3>Hithere</h3>，<strong></strong> 和 <em></em> 全丢失。
实操建议：
- 手动提取文本内容 + 当前样式信息（通过
getComputedStyle获取 color/fontWeight 等），再用document.createElement('h3')构建新节点，逐个 clone 子节点或重写内联样式 - 更稳妥的做法：改用
insertHTML配合预生成的 HTML 字符串，比如execCommand('insertHTML', false, '<h3><strong>' + text + '</strong></h3>')，但需提前剥离原始 HTML 结构并转义 - 注意：若用户选中跨多个块（如一段
<p></p>加一段<div>），<code>formatBlock只作用于第一个块，其余不变——这点常被忽略现代替代方案为什么值得考虑
execCommand已被 MDN 标记为废弃，Chrome 98+ 开始限制其部分能力（如对contenteditable外区域无效），而且无法监听格式变化、难以与 React/Vue 状态同步。真正稳定的标题切换应绕过它。实操建议：
- 用
Selection+RangeAPI 手动获取选区，创建h1–h6元素并replaceWith()或wrap()（需自行实现 wrap 逻辑） - 在编辑器顶层监听
input或selectionchange，用document.elementFromPoint()或getSelection().anchorNode.parentElement实时推断当前标题层级，驱动 UI 按钮高亮 - 如果项目已用 ProseMirror 或 Slate，直接用其内置的
setNodeMarkup或toggleMark更可控——formatBlock的兼容性债，现在还比以后容易
最麻烦的不是怎么调用
formatBlock，而是它不告诉你什么时候没调成，也不告诉你调成了但结构已损毁。真要长期维护，尽早抽离对它的依赖。 - 用
