如何使用原生JavaScript让静态HTML页面在浏览器中可编辑
内容提要
本文介绍如何用约百行原生JavaScript和contenteditable属性，为静态HTML页面（如简历）添加浏览器内编辑功能，无需构建工具。用户可编辑文本、移动或删除块、添加内容、修改链接、控制打印分页并导出PDF，刷新后恢复原文件。文章强调DOM即状态，不持久化是特性，适合单次调整打印场景，避免框架复杂性。
延伸解读
为什么选择DOM即状态
文章强调，对于单次调整后打印的场景，将DOM作为唯一状态是合理的设计。刷新即重置，提供了免费的撤销功能，且避免了持久化带来的序列化、版本控制等复杂性。这种模式适合简历、菜单等一次性编辑的文档，但若需要多人协作或数据验证，则需转向真正的应用架构。
CSS派生状态减少维护成本
通过移除<hr>分隔符，改用相邻兄弟选择器（如.job + .job）绘制分隔线，实现了分隔线随内容自动调整。这体现了“从结构派生状态而非重复存储”的原则，简化了移动、删除块时的逻辑，避免了孤立分隔线的问题，也减少了JavaScript的干预。
现代CSS特性提升交互体验
使用:has()选择器实现仅显示最内层悬停块的控制按钮，避免了多层控制按钮同时出现的视觉干扰。同时，通过@supports提供降级方案，确保旧浏览器仍能显示控制按钮，只是行为稍显嘈杂。这种渐进增强策略兼顾了功能与兼容性。
原生API的务实选择
文章采用prompt()处理链接编辑，而非自定义模态框，理由是原生API简单可靠且无法破坏。同样，利用contenteditable和DOM操作而非框架，降低了依赖和构建步骤。这种务实态度提醒我们，在需求简单时，避免过度工程化，优先使用浏览器内置能力。
Q&A
如何使用原生JavaScript让静态HTML页面在浏览器中可编辑？
通过给页面元素添加contenteditable属性，并使用约百行原生JavaScript代码，可以实现文本编辑、块移动、删除、添加内容、修改链接、控制打印分页等功能。无需构建工具，刷新后恢复原文件。
contenteditable属性有什么作用？
contenteditable是HTML属性，可将元素变为可编辑区域，浏览器自动处理光标、选择、输入、删除、剪贴板和撤销历史。但仅此不足以构成编辑器，它没有块的概念，无法移动或删除块、修改链接等。
为什么不用React等框架来实现编辑功能？
因为页面是静态文件，无依赖、无构建，编辑需求简单（改文本、移动块、删除、添加、打印），DOM操作即可满足。框架适用于状态持久化、协作、验证等复杂场景，而这里状态就是DOM，生命周期仅一次会话，框架是多余层。
如何实现块的重排和删除？
通过一个可复用的makeBlock函数为每个块注入控制按钮（上移、下移、删除），使用事件委托监听点击，通过siblings函数过滤同类型兄弟节点，用before()和after()移动节点，用remove()删除。
如何编辑链接的URL？
在可编辑区域内，单击链接只放置光标，双击链接会触发prompt()对话框，输入新URL即可修改；若输入空字符串则移除链接，仅保留文本。同时为链接添加title属性提示用户双击可编辑。
如何控制打印分页？
通过为块添加page-break类，在@media print中设置break-before: page，实现分页。屏幕上该类显示为虚线分隔线，打印时隐藏。用户可通过控制按钮中的⇟按钮切换分页。
如何添加新内容？
为每个可重复容器添加'+ Add'按钮，点击后根据模板创建新块，并调用makeBlock使其可移动删除，同时使用selectText预选占位文本，方便直接输入替换。
为什么编辑内容不持久化？
因为设计目标是单次调整后打印PDF，刷新即重置，提供免费撤销，避免持久化带来的序列化、版本冲突等复杂性。工具栏明确提示'Nothing is saved. Refresh resets everything.'
