HTML 保格式可编辑化

要解决的问题

从静态页面到可编辑文档之间，往往隔着一次"破坏性"的复制粘贴。生成好的 HTML 一旦定稿就成了"死"页面：改几个字可能让布局错乱，用浏览器开发者工具手动改 DOM 又容易丢样式、留残渣。常见做法要么牺牲视觉保真，要么干脆重写，成本都很高。这个技能要解决的就是：把已有 HTML 原地变成可编辑版本，同时视觉上一像素都不差。

工作原理

整个流程分八步，核心思路是"样式搬家，视觉不动"：

1. 读入与解析：接收包含内联样式、<style> 块和外部资源的 HTML，解析完整 DOM 与全量样式，记录原始视觉参数。
2. 抽取样式：把分散的样式抽取为 CSS 变量或 class，存储位置变了，但颜色、间距、字体、布局等视觉值原样保留。
3. 标记可编辑节点：文本节点加 contenteditable，区块级元素加 data-edit 标注；同时补锚点和注释，不增加渲染负担。
4. 注入编辑态框架：编辑草稿只存本地 data/ 目录，不上云、不联网，编辑态 JS 也是纯本地的，不引入任何第三方脚本。
5. 一致性校验：转换前后自动比对关键 CSS 值，确认"长相没变"。
6. 双版本输出：编辑版用于日常改稿，干净版剥离所有编辑态，恢复原样，方便交付。

注意点与适用边界

• 高风险节点不硬拆：绝对定位、canvas 动画等元素采用 wrapper 标注为"可替换"，而不是强行拆解，保证零破版。
• 资源引用不变：图片等外部资源保持原引用，只加可替换锚点。
• 输入范围：任意 .html 文件都适用，含内联样式和外部引用；复杂 canvas 动画仅做标注。
• docx 互转不在本技能范围内，建议交给 pandoc 或现有文档类技能处理。