document.execCommand 已被Chrome 93+、Firefox 87+、Safari 15.4+废弃，因跨浏览器行为不一致、安全风险高且依赖不可靠的contenteditable底层实现，调用常静默失败或抛出TypeError。
document.execCommand 为什么在现代浏览器里基本失效了
因为 document.execCommand 已被 Chrome 93+、Firefox 87+、Safari 15.4+ 标记为废弃（deprecated），且在部分场景下直接抛出 TypeError: document.execCommand is not a function 或静默失败。根本原因是它依赖 contenteditable 元素的底层实现，而各浏览器对该 API 的行为定义不一致，安全性和可访问性也长期受质疑。
常见误判是“加个 designMode = 'on' 就能用”，但实际连 document.designMode 在新版本 Safari 中也已禁用。如果你正调试一段老代码却始终触发不了加粗/插入链接，大概率不是写法错，而是浏览器已主动屏蔽。
替代方案：用原生 Selection + Range 手动操作 DOM
当必须动态修改富文本内容（比如点击按钮插入自定义 HTML 片段），应绕过 execCommand，直接操作选区：
- 用
window.getSelection()获取当前光标或选中范围 - 用
getRangeAt(0)提取Range对象 - 调用
range.deleteContents()清除选中内容（如有） - 用
range.insertNode()或range.insertAdjacentHTML()插入节点
例如插入一个带 class 的高亮标签：
立即学习“前端免费学习笔记（深入）”；
const sel = window.getSelection();
if (sel.rangeCount > 0) {
const range = sel.getRangeAt(0);
const span = document.createElement('span');
span.className = 'highlight';
span.textContent = '高亮文字';
range.insertNode(span);
}
如果非要兼容旧版 IE/Edge Legacy，注意三个关键限制
仅限于 contenteditable="true" 元素内调用，且必须满足：
- 页面处于焦点状态（
document.hasFocus() === true） - 目标元素已渲染并可交互（不能在
DOMContentLoaded后立即调用，需加setTimeout(..., 0)或监听focus） - 命令参数大小写敏感：
document.execCommand('bold', false, null)可行，但'BOLD'或'Bold'会失败
常用命令如 insertUnorderedList、formatBlock 在不同浏览器中对空行、嵌套块级元素的支持差异极大，比如 Firefox 不支持在 <div contenteditable> 中用 formatBlock 插入 <h2>，而 Chrome 允许——这种不一致性正是它被淘汰的主因。
真正该用什么？优先考虑成熟的富文本库或自研编辑器框架
除非项目强制要求零依赖、仅支持 IE11，否则不要从头封装 execCommand 行为。现在主流选择是：
-
slatejs或lexical：React 生态中可控性强、可测试性好 -
tiptap：基于 ProseMirror，TypeScript 友好，插件机制清晰 - 服务端渲染场景下，改用纯 Markdown 编辑 + 实时预览，避开客户端编辑逻辑
哪怕只是临时加个“插入表情”按钮，也比硬扛 execCommand 的兼容性补丁更省时间。它的坑不在语法难懂，而在行为不可预测——比如 insertImage 在某些情况下会把图片插到编辑器外层 body 里，且无法通过 CSS 定位修正。
