querycommandstate 返回 false 的常见原因包括：光标不在可编辑上下文、dom 未重排、浏览器差异、selectionchange 事件时机不当、命令不支持状态查询、ie/edge 兼容性问题及“部分加粗”等中间态无法表达。
queryCommandState 返回 false 的常见原因
调用 queryCommandState 时返回 false，往往不是命令不支持，而是当前光标位置不在可编辑上下文中。比如：document.execCommand('bold') 执行后，若光标移出 contenteditable 区域、或落在空文本节点、或被包裹在不可编辑的父元素（如 div[contenteditable="false"]）里，queryCommandState('bold') 就会失准。
- 确保调用前焦点仍在目标
contenteditable元素内，可用el.contains(document.activeElement)校验 - 避免在 DOM 变更后立即查询——需等待浏览器完成样式重排，建议加
requestAnimationFrame延迟 -
queryCommandState对部分命令（如'justifyCenter'）存在浏览器差异：Chrome 返回布尔值，Firefox 可能返回null或字符串，需统一兜底为!!value
监听 selectionchange 后如何安全触发状态检查
仅靠 selectionchange 事件不够——它不保证 DOM 已就绪，也不区分是用户操作还是脚本触发。直接在里面调用 queryCommandState 容易拿到过期状态。
- 绑定事件时用
addEventListener('selectionchange', handler, { capture: true })，捕获阶段提前拦截 - handler 内部先判断
document.activeElement === editorEl，排除焦点丢失干扰 - 用
getSelection().focusNode检查是否落在文本节点；若为null或element.nodeType !== Node.TEXT_NODE，跳过状态更新 - 高频触发时加防抖（
setTimeout+ 清除机制），避免连续调用导致工具栏闪烁
工具栏按钮高亮与 command 值的映射陷阱
很多开发者直接把按钮 data-command 值传给 queryCommandState，但并非所有命令都支持状态查询。例如 'insertHTML'、'createLink' 永远返回 false，而 'formatBlock' 需配合 queryCommandValue 才能判断当前块类型。
- 必须查 MDN 文档确认命令是否列入 支持列表，如
'bold'、'italic'、'subscript'可用，'fontName'不行 - 对格式类命令（
'formatBlock'、'fontSize'），改用queryCommandValue获取当前值，再比对按钮的data-value - 按钮状态应以「当前选区是否处于该格式」为准，而非「上一次执行过该命令」——后者会导致点击一次 bold 后，即使删掉加粗文字，按钮仍高亮
IE 和旧版 Edge 下 queryCommandState 的兼容性补救
IE11 和 Edge Legacy 对 queryCommandState 的实现更严格：若选区跨多个块级元素，'bold' 可能返回 false 即使部分文字加粗；'indent' 在无缩进时返回 undefined 而非 false。
- 对关键命令（如
'bold'、'italic'）做降级处理：用getSelection().getRangeAt(0).commonAncestorContainer向上遍历，检查最近的strong或em父元素 - 避免依赖
queryCommandState('indent')，改用window.getComputedStyle(node).marginLeft判断实际缩进值 - 在初始化时检测
document.queryCommandSupported('bold')，不支持则整套状态同步逻辑 fallback 到 DOM 解析路径
真正麻烦的是跨浏览器下「部分加粗」这种中间态——queryCommandState 无法表达“部分选区加粗”，只能返回 false 或 true，这时候 UI 是否显示半选中态，得靠你自己解析 Range 并统计格式占比，没标准 API 可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
