Article To Html

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

下载

可用工具栏需用contenteditable+execcommand搭配原生按钮，但必须处理焦点、空选区、命令全小写及回车行为，否则易出现点不动、格式错乱、光标消失等问题。

直接用 contenteditable + document.execCommand 搭配原生按钮就能做出可用的工具栏，但必须处理好焦点、空选区、命令大小写和回车行为——否则点不动、格式错乱、光标消失都是常态。

工具栏按钮怎么绑定 execCommand 命令

按钮本身不执行任何操作，只是触发器。关键在点击时确保编辑区有焦点，并传入正确参数：

• document.execCommand 的第一个参数（命令名）必须全小写，比如 'bold'，传 'Bold' 或 'BOLD' 会静默失败
• 第二个参数是 showUI，基本都设为 false；第三个参数是 value，对 'bold' 这类布尔型命令传 null 即可
• 必须先调用 editor.focus()，否则在某些浏览器（尤其是 Safari 和旧版 Edge）里命令不生效
• 不要把 onclick 直接写在 HTML 里，统一用 addEventListener 管理，方便后续加状态同步逻辑

为什么点完按钮光标消失了或格式没套上

常见原因不是代码写错，而是 DOM 状态没对齐：

• 编辑区没设 tabindex="0"，导致键盘无法聚焦，execCommand 执行时找不到目标上下文
• 用户点击按钮前没在编辑区里点一下，getSelection() 返回空，命令无作用对象
• 空行触发 'insertUnorderedList' 会生成孤立 <ul></ul>，需提前用 getSelection().toString().trim() === '' 判断是否跳过
• 移动端 Safari 对 execCommand 支持更弱，部分命令（如 'formatBlock'）可能完全无效，建议降级为手动插入 <p></p> 或 <h2></h2>

如何让工具栏按钮实时反映当前格式状态

不能只靠点击触发，还得监听选区变化并更新 UI：

• 监听 selectionchange 事件（注意：它不冒泡，得挂到 document 上）
• 用 document.queryCommandState('bold') 判断当前选区是否已加粗，返回 true/false
• 注意 queryCommandState 在 Firefox 中对 'justifyCenter' 等对齐命令支持不稳定，可改用 getComputedStyle 查 textAlign
• 按钮激活态建议用 aria-pressed 而非仅靠 class，兼顾可访问性

要不要现在就放弃 execCommand 改用 Selection + Range

没必要一刀切。实际项目中更合理的做法是分层处理：

• 基础格式（'bold'、'italic'、'underline'）继续用 execCommand，兼容性好、代码少、不易出错
• 结构类操作（'insertOrderedList'、'formatBlock'）加一层防护：执行前检查 getSelection().anchorNode 是否在可编辑容器内，避免跨 <div> 套嵌 <li>真正需要精确控制（比如插入带 href 的链接、包裹选区为自定义标签）才手写 <code>Range 逻辑，用 document.createElement + range.surroundContents 替代
• 别忘了 execCommand 已被 MDN 标记为 deprecated，但 Chrome 120+、Firefox 125、Safari 17.4 仍 100% 支持——你放弃它，换来的不是稳定性，是更多边界 case 需要自己填

最常被忽略的一点：工具栏按钮的 data-command 值和实际调用的命令名必须严格一致，且所有命令都应在初始化时预注册校验逻辑，否则后期加新功能时容易漏掉大小写或拼写检查。