execCommand已被废弃，现代项目不应依赖它：Chrome 98+、Firefox 84+默认禁用，Safari已移除支持，存在行为不一致、DOM控制不精准、不兼容Shadow DOM等问题。
execCommand 已被废弃，现代项目中不应依赖它实现富文本编辑功能。它在 Chrome 98+、Firefox 84+ 中默认禁用，Safari 早已移除支持，且行为不一致、无法精准控制 DOM、不兼容 Shadow DOM —— 如果你正卡在某个老系统里被迫用它，下面这些实操细节能帮你少踩坑。
为什么 document.execCommand('bold') 有时没反应
最常见原因是执行前焦点不在 contenteditable 区域内，或该区域未获得用户交互触发（比如脚本自动调用）。浏览器对非用户手势触发的 execCommand 调用会静默忽略。
- 确保目标元素已
focus()，且调用发生在用户事件回调中（如click、keydown） - 避免在
setTimeout或异步回调中直接调用，除非明确包装在event.preventDefault()后的用户事件流中 - 检查元素是否设置了
contenteditable="true"，且父级没有contenteditable="false"阻断继承 - 部分浏览器（如旧版 Safari）要求选区必须由用户真实操作生成，
Selection+Range手动设置的选区可能无效
execCommand 的命令参数差异：'bold' vs 'insertHTML' vs 'formatBlock'
不同命令底层处理逻辑完全不同，直接影响输出 HTML 结构和后续样式控制能力。
-
'bold'：多数浏览器插入<strong>，但 IE 用<b>；无法指定 class 或 data 属性 -
'italic'：同理，可能生成<em>或<i>，不可控 -
'insertHTML'：可传入任意 HTML 字符串（如document.execCommand('insertHTML', false, '<span class="highlight">xxx</span>')），但会破坏原有选区结构，且不保证语义正确性 -
'formatBlock'：对整块内容生效，传入'<p>'或'<h2>'，但 Firefox 会把<h2>变成<h2><br></h2>，导致空行
如何让加粗/斜体按钮状态实时同步选区格式
document.queryCommandState() 是唯一能查当前选区是否处于 bold 状态的方法，但它返回布尔值，不区分 <strong> 和 <b>，也不识别 CSS font-weight: bold 样式。
立即学习“前端免费学习笔记（深入）”；
- 调用前必须确保
document.hasFocus()且选区属于目标contenteditable - 它只对“全选中”或“部分选中但格式统一”的情况可靠；如果选区跨多个格式（比如一半加粗一半普通），返回
false—— 这是预期行为，不是 bug - 不要用它做 UI 按钮的“三态”判断（如部分加粗时显示半亮），它不支持
- 监听
selectionchange事件比轮询更高效，但注意该事件在 Firefox 中不冒泡，需绑定到document
真正可控的富文本编辑，现在应该用 InputEvent + getSelection() + 手动 DOM 操作，或直接接入 ProseMirror、Lexical 这类现代编辑器框架。而 execCommand 的残留价值，仅限于临时修复、内部工具或兼容极老系统——它的不确定性不是配置问题，是设计使然。
