方法论

1. 编辑器架构

工作区为 HTML、CSS 和 JavaScript 提供三个文本编辑器，支持行号边栏、Tab 缩进处理、字号控制和可选自动换行。

2. HTML 处理

HTML 面板中的 HTML 被放入生成文档的 body 中。该工具不会将 HTML 作为父页面 UI 执行。

3. CSS 注入

CSS 被插入到生成文档 head 中的 style 元素，使规则仅应用于预览文档。

4. JavaScript 执行

JavaScript 被放入预览文档内的 script 元素中。点击 Run 后，它在 iframe 浏览上下文中运行。

5. iframe 渲染

组合后的文档被赋值给 iframe.srcdoc，从而创建新的预览文档，而不会导航父页面。

6. sandbox 隔离

iframe 使用 sandbox 属性（允许预览脚本）。父级 DOM API 不会暴露给用户代码执行。

7. 控制台处理

预览内的小型桥接通过 postMessage 将 console.log/info/warn/error 和运行时错误转发到父页面以供显示。

8. 浏览器 API

脚本能做什么取决于浏览器策略和 sandbox 权限。某些 API 在 iframe 中的行为与顶级页面不同。

9. 本地存储

编辑器状态可写入限定于此来源的 localStorage 键，以便刷新不会清除进行中的工作。

10. 限制

标准 HTML/CSS/JS 没有服务端编译。复杂的构建流水线、私有包和特权设备 API 不在范围内。

11. 隐私考量

预览组装在客户端完成。除非您导出或将内容复制到其他地方，否则本地持久化保留在浏览器中。