document.execCommand已废弃，Chrome 93+等新版浏览器默认禁用，调用返回false且无提示；迁移需改用Selection+Range API或接入tiptap等现代编辑器。

HTML老编辑器迁移到新编辑器时，document.execCommand 为什么直接失效了

因为现代浏览器已废弃 document.execCommand，Chrome 93+、Firefox 89+、Safari 15.4+ 默认禁用，调用后返回 false 且无提示。不是配置问题，是标准层面移除。

常见错误现象：execCommand('bold') 看似执行但文本没加粗；控制台没报错，但 DOM 没变化；部分旧插件突然失灵。

• 别再依赖它做格式操作——哪怕加了 contenteditable="true" 也无效
• 迁移路径只有两条：改用 Selection + Range API 手动操作 DOM，或接入成熟编辑器（如 tiptap、lexical）
• 若必须兼容老代码，可用 polyfill 库 execCommand-polyfill，但它只模拟基础行为，不支持嵌套格式、撤销栈等关键能力

从 contenteditable + execCommand 迁移到 prosemirror 的最小改造点

不是重写整个编辑器，而是聚焦「粘贴、光标定位、格式同步」这三个最痛的环节。

• 粘贴处理：老逻辑常监听 paste 事件并用 execCommand('insertHTML') 插入，新方案需用 transformPastedHTML 钩子清洗 HTML，否则样式错乱、脚本执行、XSS 风险全回来
• 光标恢复：老代码靠 range.selectNodeContents() + selection.addRange()，ProseMirror 要用 tr.setSelection(tr.doc.resolve(pos))，位置计算逻辑得重推
• 格式状态同步：以前查 document.queryCommandState('bold')，现在得监听 editorView.state.selection.$from.nodeBefore 并解析节点 marks

自研轻量编辑器时，input 事件和 beforeinput 选哪个监听内容变更

beforeinput 是更准的选择，但它在 Safari 15.4 之前不支持，且不能阻止默认行为（比如想拦截表情符号输入就做不到）。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

立即学习“前端免费学习笔记（深入）”；

• input 事件延迟高：用户敲字后要等浏览器完成渲染才触发，导致实时统计字数、语法高亮有卡顿感
• beforeinput 更早：在字符插入前触发，可读取 event.data 和 event.inputType，适合做智能替换（如输入 == 自动转为下划线）
• 兼容写法必须双监听：先绑 beforeinput，降级到 input，并在 compositionend 后手动补一次校验（中文输入法上屏后才真正落盘）

迁移后发现 Ctrl+Z 失效或撤销粒度变大，怎么调 undo 栈

老编辑器靠浏览器原生撤销栈，粒度粗（整段文字增删才算一步），新编辑器（如 ProseMirror、Tiptap）默认按 transaction 记录，但默认配置可能合并过快。

• 检查是否启用了 history 插件：Tiptap 需显式加 History extension，ProseMirror 要传 history() 到 plugins
• 撤销合并策略：Tiptap 的 depth 参数控制合并阈值，默认 200ms 内连续输入算一步，调太小会拆太碎，调太大又像老编辑器一样“跳步”
• 关键细节：如果用了自定义命令（比如插入表格），必须用 editor.chain().focus().insertTable().run() 而非直接操作 DOM，否则这步不会进 undo 栈

真正的坑不在 API 替换，而在「撤销」这种隐式行为背后的状态一致性——DOM、编辑器内部 state、外部绑定的 reactive 数据，三者稍有不同步，Ctrl+Z 就会跳帧或回退到错误位置。