Building a Web Page That Edits Itself
2 days ago
- #web development
- #self-editing webpage
- #HTML experiment
- 最初的网络愿景是读写互动，作者受文件优先方法和读写网络复兴的启发，目标是创建一个能自动更新的HTML文件。
- 该项目从使用JavaScript操作DOM的基础原型逐步发展，最终重构为使用Vite构建的TypeScript模块，以提高代码组织性和修复bug。
- 一个关键的设计转变是使用contenteditable='true'实现就地编辑，而不是用文本框替换元素，从而简化了UI和同步过程，并通过数据属性支持如取消操作等功能。
- 最终功能集包括文本元素（h1-h6、p），以Data URL形式存储的图片，以及文本或图片的链接包装，右侧控制面板支持元数据和样式调整。
- 编辑界面仅限于本地文件协议（file:///）或特定子域名；用户可下载index.html以在其他位置编辑，并在画廊中展示示例。