夜雨聆风「绘有所有」产品系列 | 拾光页篇
先问你一个问题。
你有没有遇到过这种场景——
领导发来一个 HTML 页面，说“这段文字改一下，这张图换掉，这个颜色调深一点”。你打开代码编辑器，找到对应的文字，改了，保存。刷新浏览器，看效果。发现位置不对，又切回代码编辑器，调一下 padding，再保存，再刷新……
改一行字，来回切七八次。
明明只是改个文案、换张图，却要像写代码一样小心翼翼地操作。
HTML 做汇报展示确实效果好，但修改成本太高了。
后来我做了一个小工具，解决了这个问题——「拾光页」。
拾光页是什么？
一句话定义：
拾光页是一个在浏览器里运行的 HTML 可视化编辑器——导入 HTML 文件后，直接在页面上点击任意文字或图片就能修改，改完一键保存导出。
你不用碰代码。点哪里，改哪里。
和“在线 HTML 编辑器”有什么不一样？
市面上有不少在线 HTML 编辑器，但它们大多需要你：
在它们的编辑器里从零写代码 或者把代码粘贴到它们的编辑框里 而且编辑体验和“可视化”没什么关系——还是在改代码
拾光页做的事情完全不同：
你把现有的 HTML 文件拖进来，它原样渲染出来。然后你打开「编辑模式」，直接在页面上点文字改文字、点图片换图片。改完导出，就是一个新的 HTML 文件。
它不强迫你改变工作流，而是融入你的工作流。
⚠️ 先说清楚：目前适合单页面 HTML
有一点要先说明——目前的版本只适合单页面 HTML。
也就是说，它最适合的场景是：一个独立的 HTML 文件，所有样式和内容都在一个文件里（比如你从网上下载的 HTML 模板、自己写的单页文档、用 Markdown 导出的 HTML 等）。
如果你导入的 HTML 引用了外部 CSS（比如 <link rel="stylesheet" href="style.css">）或外部 JS，目前这些外部资源还不会被一起打包，可能导致导入后样式丢失。
什么时候可以用？
✅ 单个 HTML 文件（所有样式内联在 <style>标签里）✅ 从 Markdown 导出的 HTML 文件 ✅ 从各种工具导出的“单文件”HTML ❌ 引用外部 CSS/JS 文件的复杂项目
未来我会考虑支持“上传整个文件夹”的方式来解决这个问题，目前还是先聚焦在单页面场景——这是需求最集中、也最容易被忽略的刚需。
核心功能
一、导入：拖进来就能用
支持两种方式导入 HTML 文件：
- 点击上传
：点击「导入」按钮选择文件 - 拖拽导入
：直接把 .html文件拖到页面上
导入后，HTML 会在编辑区原样渲染——内联在文件里的 CSS 样式和 JS 脚本全部保留，和你在浏览器里打开的效果一致。
二、编辑：点哪改哪
打开右上角的「编辑模式」开关，页面就变成了可编辑状态。
改文字：点击任意文字块，直接输入新内容
改图片：双击图片，弹出文件选择器，选一张新图替换（新图片会以 base64 形式内嵌到 HTML 中）
调整样式：选中文字后，顶部弹出浮动工具栏——加粗、斜体、下划线、删除线、颜色、字号、对齐，随手调
调整图片：选中图片后，显示 8 个拖拽手柄——四角等比缩放、四边自由拉伸；顶部工具栏支持左/中/右对齐
三、右侧属性面板：精细控制
如果浮动工具栏不够用，右侧还有一个完整的属性面板：
| 段落 | |
| 文字样式 | |
| 字号 | |
| 文字颜色 | |
| 背景颜色 | |
| 行间距 | |
| 列表 | |
| 清除格式 | |
| 文字链接 | |
| 按钮链接 | onclick 跳转 |
四、导出：改完即用
编辑完成后，点击「导出」下拉菜单：
- 导出为新 HTML
：下载完整的 HTML 文件，所有修改都在（图片会以 base64 形式内嵌） - 导出为图片
：把当前内容导出为 PNG 图片（适合做汇报截图）
导出的 HTML 会自动清理编辑标记，不会留下任何“编辑痕迹”。
五、自动保存
所有编辑内容自动缓存在浏览器本地（localStorage），刷新页面不会丢。
如果不小心关掉了页面，重新打开，内容还在。
一个完整的工作流
假设你现在要改一份周报 HTML：
第 1 步：打开拾光页（https://tools.shiguangbu.com/shiguangye/）
第 2 步：把周报 HTML 文件拖进去
第 3 步：打开「编辑模式」
第 4 步：点一下标题，改成新内容；双击配图，换成新图
第 5 步：关掉编辑模式，预览效果
第 6 步：导出为新 HTML，发给领导
从打开到导出，全程没碰过一行代码。
谁适合用拾光页？
✅ 经常用 HTML 做汇报文档、需要频繁改内容的人 ✅ 设计师/运营，需要微调 HTML 页面但不想碰代码 ✅ 开发者的“辅助工具”——帮同事改页面不用自己动手，把工具丢给他就行 ✅ 任何需要快速修改 HTML 内容、又不想打开代码编辑器的人
和拾光笺的区别
「拾光系列」里有三个和“写东西/改东西”相关的工具，放在一起说一下：
| 定位 | ||
| 输入 | ||
| 编辑方式 | ||
| 输出 | ||
| 适用场景 |
怎么用？
打开浏览器，访问：https://tools.shiguangbu.com/shiguangye/
不需要下载、不需要注册、不需要付费。
拖入你的 HTML 文件，打开编辑模式，点哪改哪。
写在最后
我一直觉得，工具应该适配人的习惯，而不是让人去适应工具。
HTML 做汇报展示效果好，但修改太麻烦——这个矛盾不该靠“让所有人都学会改代码”来解决，而应该靠更好的工具。
拾光页就是这样一个尝试。
它不复杂、不花哨、不收集你的数据。它只做一件事——让你在不碰代码的情况下，改好一个 HTML 页面。
希望它能帮你省下那些“改一行字、刷一遍浏览器”的碎片时间。
📎 系列文章导航
上一篇：《拾光笺：Markdown 一键排版，还原度 95%》 本篇：拾光页 · HTML 可视化编辑器 下一篇：待定
更多往期文章，可以在公众号内回复【工具】查看完整目录。
绘所有好物，解你我所需。
下篇文章见。