HTML保格式可编辑化
> 把已有的'死'HTML 原地改成好改、但视觉一像素不差的可编辑 HTML。
触发词
- 把这个HTML改成可编辑
- 保格式转可编辑
- HTML变活页
- 让这个网页能改字
- 把生成的HTML弄成能编辑的
流程
- 读入 HTML(含内联样式 / style 块 / 外部资源)
- 解析 DOM + 全量样式,记录原视觉参数
- 抽取样式为变量 / class(视觉零改动)
- 补锚点 / 注释(不增加渲染负担)
- 标记可编辑节点(文本 contenteditable / 区块 data-edit)
- 注入编辑态框架(草稿存本地)
- 格式一致性校验(前后关键样式比对)
- 输出编辑版 + 干净版
注意
- 视觉参数原样保留,只改变样式存储位置
- 绝对定位 / canvas 等高风险节点用'包 wrapper 标注'而非强行抽样式
- 导出时剥离编辑态得到干净版,恢复原样
- 转换后可自动比对前后关键 CSS 值确认'长相没变'
红线（P0/P1/P2）
- 样式抽取绝不改动任何视觉值(颜色/间距/字体/布局)
- 不注入第三方脚本;编辑态 JS 仅本地不联网
- 图片/资源保持原引用,只标'可替换'锚点
- 草稿与用户内容存本地 data/,不上云、不对外传
- 高风险节点先预警,采用 wrapper 标注保零破版
适用边界
输入任意 .html(含内联/<style>/外部引用);不改视觉;复杂 canvas 动画仅标注可替换,不强行拆解;互转 docx 引导用 pandoc/现有文档 skill
示例
- 用户：「把这个生成好的产品页 HTML 改成能直接改文字的版本,但外观一点都别变」 → 技能输出结构化可编辑 HTML + 改稿指引。
新用户测试结论
新用户可顺畅执行 ✅（通用跨平台,数据走相对路径,无平台独占依赖）
