contenteditable 仅提供编辑入口，需手动实现格式控制、粘贴净化、光标管理等完整功能；document.execcommand 已废弃且跨浏览器行为不一致，推荐用 selection/range 原生 api 或成熟库如 tiptap。

contenteditable 属性本身不能直接创建可用的富文本编辑器——它只打开编辑入口，后续所有格式控制、粘贴处理、光标定位、撤销重做、输出净化都得手动补全，否则就是“能打字但不能用”的残缺体。

为什么 contenteditable + document.execCommand 不推荐用于生产

这两个 API 组合看似简单，实则埋着大量跨浏览器雷区：

• document.execCommand 已被 Chrome/Firefox/Edge 标记为废弃（deprecated），2025 年起部分命令（如 insertHTML）在新版本中行为不可靠或直接失效
• 同一操作在不同浏览器生成的 HTML 完全不同：bold 在 Safari 生成 <strong></strong>，Chrome 也倾向 <strong></strong>，但 Firefox 可能仍用 <b></b>；formatBlock 在 Firefox 中对 <h2></h2> 失效是常态
• 粘贴 Word 或网页内容时，contenteditable 默认不拦截，直接塞入嵌套 <span style="font-family: Calibri"></span>、无意义 <div class="MsoNormal">，清洗逻辑必须自己写 <li>回车键行为混乱：Chrome 插入 <code><div>，Firefox 插入 <code><p></p>，Safari 两者都可能，且 Shift+Enter 换行（<br>）在移动端常被忽略

  如何用原生 DOM 实现一个最小可行格式化功能

  若必须手写（如嵌入式备注框、极简后台字段），应绕过 execCommand，改用 Selection + Range 手动包裹节点。核心是三步：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 监听工具栏按钮点击，获取当前 window.getSelection()，检查 rangeCount > 0
  • 调用 range.cloneContents() 或直接新建元素（如 document.createElement('strong')），再用 range.surroundContents() 包裹选区（注意：该方法要求选区完全在单个块级元素内，否则抛错）
  • 对不满足 surroundContents 条件的跨节点选区（如横跨两个 <p></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 字符串，直接插入会破坏结构。正确做法是：

  • 在 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。它们的源码里藏着过去十年踩过的全部坑，而你的时间不该花在重复造轮子上。