contenteditable 仅提供编辑入口，需手动实现格式控制、粘贴净化、光标管理等完整功能；document.execCommand 已废弃且跨浏览器行为不一致，推荐用 Selection/Range 原生 API 或成熟库如 Tiptap。
contenteditable 属性本身不能直接创建可用的富文本编辑器——它只打开编辑入口，后续所有格式控制、粘贴处理、光标定位、撤销重做、输出净化都得手动补全，否则就是“能打字但不能用”的残缺体。
为什么 contenteditable + document.execCommand 不推荐用于生产
这两个 API 组合看似简单，实则埋着大量跨浏览器雷区：
-
document.execCommand已被 Chrome/Firefox/Edge 标记为废弃（deprecated），2025 年起部分命令（如insertHTML）在新版本中行为不可靠或直接失效 - 同一操作在不同浏览器生成的 HTML 完全不同：
bold在 Safari 生成<strong>，Chrome 也倾向<strong>，但 Firefox 可能仍用<b>；formatBlock在 Firefox 中对<h2>失效是常态 - 粘贴 Word 或网页内容时，
contenteditable默认不拦截，直接塞入嵌套<span style="font-family: Calibri">、无意义<div class="MsoNormal">，清洗逻辑必须自己写 - 回车键行为混乱：Chrome 插入
<div>，Firefox 插入<p>，Safari 两者都可能，且Shift+Enter换行（<br>）在移动端常被忽略
如何用原生 DOM 实现一个最小可行格式化功能
若必须手写（如嵌入式备注框、极简后台字段），应绕过 execCommand，改用 Selection + Range 手动包裹节点。核心是三步：
- 监听工具栏按钮点击，获取当前
window.getSelection()，检查rangeCount > 0 - 调用
range.cloneContents()或直接新建元素（如document.createElement('strong')），再用range.surroundContents()包裹选区（注意：该方法要求选区完全在单个块级元素内，否则抛错） - 对不满足
surroundContents条件的跨节点选区（如横跨两个<p>），需遍历range.extractContents()后逐段包裹，再range.insertNode() - 加粗示例片段：
const selection = window.getSelection(); if (!selection.rangeCount) return; const range = selection.getRangeAt(0); const strong = document.createElement('strong'); range.surroundContents(strong); // 仅适用于简单选区
粘贴内容必须拦截并重解析，不能信任 event.clipboardData.getData('text/html') 原始值
用户从 Word 或网页复制的内容，getData('text/html') 返回的是带污染的 HTML 字符串，直接插入会破坏结构。正确做法是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在
paste事件中调用event.preventDefault() - 用
new DOMParser().parseFromString(html, 'text/html')解析为文档对象 - 递归遍历其
body子节点，过滤掉style属性、class属性、font标签、o:p等 Office 特有节点 - 将
b→strong、i→em、u→span[style="text-decoration:underline"]统一转义 - 最后用
range.deleteContents()+range.insertNode()插入净化后节点
真正难的不是“让文字变粗”，而是“用户 Ctrl+Z 按了三次之后，光标还停在正确位置”
撤销栈、光标恢复、选区序列化、块级结构一致性（比如把段落拆成标题+列表+代码块）、移动端 iOS 键盘遮挡与光标跳跃——这些都不是靠查 MDN 就能解决的边界 case。除非你团队里有人持续维护过 Selection/Range 的兼容性补丁（比如处理 getSelection().anchorOffset 在 iframe 和 shadow DOM 中的差异），否则请直接集成 Tiptap 或 Quill。它们的源码里藏着过去十年踩过的全部坑，而你的时间不该花在重复造轮子上。
立即学习“前端免费学习笔记（深入）”；
