# HTML Visual Editor

> 给任何已有 HTML 文件（幻灯片 deck、落地页、海报、报告页）注入可视化编辑能力——用户在浏览器里点击文字即可直接修改， 修改自动暂存（localStorage，刷新不丢），一键导出烘焙好修改的 HTML 文件。无需碰代码即可完成文案微调。 只要用户想"可视化编辑 HTML"、"直接点击改 HTML 文字"、"不用代码改网页/deck 文案"、"WYSIWYG 编辑 HTML"、 "像 PPT 一样改 HTML 幻灯片"，或者对 beautiful-html-templates / frontend-slides 等生成的 HTML deck 做文字微调时， 都必须使用本 skill，即使用户没有明确说出"可视化编辑器"这个词。

- Skill: `nana7536/html-visual-editor` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add nana7536/html-visual-editor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nana7536/html-visual-editor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nana7536 (https://skillmd.com/u/nana7536)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/nana7536/html-visual-editor

---


# HTML Visual Editor

把纯静态 HTML 文件变成可在浏览器里直接点选编辑的页面。核心思路：往 HTML 里内联注入 `assets/visual-editor.js`（一个零依赖、自包含的脚本），页面右下角会出现工具栏，用户点"✏️ 编辑"后即可点击任意文字块直接修改。

## 为什么这样设计

- **自包含单文件**：脚本是内联注入的，不引用外部资源，注入后的 HTML 仍然双击就能用，适合 beautiful-html-templates 这类强调"单文件 deck"的场景。
- **不破坏设计系统**：用户只能改文字内容（标题、正文、列表、表格单元格等"叶子文本块"），字体、配色、版式、动效一概不动——这与模板库"设计系统锁定"的原则一致。
- **编辑与幻灯片导航共存**：编辑模式下按键事件会被拦截，不会触发 deck 的翻页快捷键。

## 使用流程

1. **注入**（幂等，重复执行会自动跳过）：

   ```bash
   python "<skill_dir>/scripts/inject_editor.py" "<目标文件.html>"
   ```

   - 默认就地修改，并自动创建一次性备份 `<文件名>.html.vebak`
   - 想保留原文件可加 `--out <新文件.html>`
   - Windows 环境注意路径引号；`<skill_dir>` 即本 SKILL.md 所在目录

2. **打开文件**：在浏览器中打开注入后的 HTML（Windows 用 `start "" "<文件路径>"`，macOS 用 `open`）。

3. **告诉用户这三个按钮**（每次注入后都要说明）：
   - **✏️ 编辑**：开关编辑模式。开启后文字块出现蓝色虚线框，点击即可输入；再点一次退出（恢复放映/翻页体验）
   - **💾 导出 HTML**：把当前所有修改烘焙进 HTML 并下载为 `<原名>.edited.html`；导出的文件是干净版本（不含编辑器），替换原文件即完成修改
   - **↩️ 重置**：放弃所有未导出的修改，恢复原样

4. **工作方式说明**（用户常会问）：
   - 修改实时自动暂存在浏览器 localStorage，**刷新、关闭重开都不丢**；点"导出"后暂存自动清空
   - 导出文件如需再次编辑，重新跑一次注入脚本即可

## 适用与边界

**适合**：改标题/正文/数据/人名/日期/按钮文字等文案；deck、落地页、信息海报等静态单文件 HTML。

**不适合、应回退到直接改代码的情况**：
- 改图片、改布局结构、增删页面、调样式 —— 编辑器只处理文字
- 元素是 JS 动态渲染出来的（注入脚本在页面加载时扫描一次；动态内容的修改不会持久化）

## 交付清单（每次执行后给用户）

1. 注入后文件的绝对路径（单独一行，可点击）
2. 三个按钮的一句话说明
3. 提示：改完点"💾 导出 HTML"，用下载的 `.edited.html` 替换原文件