HTML 可视化编辑器注入

要解决的问题

单文件 HTML 调研或方案常需要反复调整客户名、文案、字体和颜色，但直接改源码对非技术用户门槛很高，复制分发后也容易出现样式或结构问题。这个技能把可视化编辑能力注入到静态 HTML 中，让页面在浏览器里像文档一样可直接修改。

工作方式

• 注入方式：将 editable-inject.js 放在 HTML 同目录，并在页面中加入一行脚本引用。
• 编辑能力：基于 contenteditable，支持点击文字修改、Cmd/Ctrl+E 进入或退出编辑、Cmd/Ctrl+S 保存到 localStorage、Esc 丢弃变更、最多 10 步撤销/重做。
• 格式控制：提供查找/全局替换、中英文字体分离、基于选区的文字色取色、重置样式、恢复初版，以及导出无编辑器代码的定稿 HTML。
• 保存恢复：按 data-edit 字段回填内容，不替换整个 body，下次打开时自动恢复草稿。

适用边界

适合发给客户的单文件方案、汇报和调研结果；不适合带 package.json、框架、路由或状态管理的工程产品。已知限制包括跨多个 contenteditable 块拖选套字体可能不生效，建议逐段处理；data-edit 值必须唯一，保存、确认退出、取消的语义也不宜混用。