formatBlock 可设置 h1–h6，但浏览器行为不统一：Chrome/Firefox/Edge 需传 <h2>，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> 替换为 <h2>hello</h2>；但如果光标在 <div><span>hello</span></div> 中，它可能生成无效结构（如 <h2><span>hello</span></h2>），而某些浏览器会拒绝并回退到最近合法块级容器（比如变成 <h2>hello</h2> 并丢弃 <span>）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调用前先用
getSelection().getRangeAt(0).commonAncestorContainer检查当前块级祖先是否为内联元素（如TEXT_NODE或SPAN），若是，先用document.execCommand('insertParagraph')强制切出新段落再操作 - 避免在富文本嵌套过深（如表格单元格、列表项内部）直接调用；优先提取纯文本内容，重建为干净的
<hX>块
如何让 formatBlock 切换标题时保留原有格式（加粗、颜色等）
不能直接保留——formatBlock 是块级替换操作，会抹掉原节点的所有属性和子节点结构，只保留文本内容。例如 <p><strong>Hi</strong><em>there</em></p> 执行 '<h3>'</h3> 后变成 <h3>Hithere</h3>，<strong> 和 <em> 全丢失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动提取文本内容 + 当前样式信息（通过
getComputedStyle获取 color/fontWeight 等），再用document.createElement('h3')构建新节点，逐个 clone 子节点或重写内联样式 - 更稳妥的做法：改用
insertHTML配合预生成的 HTML 字符串，比如execCommand('insertHTML', false, '<h3><strong>' + text + '</strong></h3>')，但需提前剥离原始 HTML 结构并转义 - 注意：若用户选中跨多个块（如一段
<p>加一段<div>），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，而是它不告诉你什么时候没调成，也不告诉你调成了但结构已损毁。真要长期维护，尽早抽离对它的依赖。
