html在线编辑器预览结构采用“编辑区+预览区”双栏协同布局，外层flex容器包裹code-editor和preview-pane两个语义化section，右侧iframe沙箱隔离并动态写入内容，小屏时通过媒体查询切换为垂直堆叠。

HTML 在线代码编辑器的预览结构左右面板，本质是“编辑区 + 预览区”的双栏协同布局，不是网页内容本身的左右分栏，而是开发工具界面的职能划分。关键在于容器隔离、尺寸可控、实时同步，且需兼顾响应式切换。

左右面板的基础 HTML 结构

典型结构用一个外层容器包裹两个子区域，语义清晰、便于控制：

• 外层用
  作为 flex 或 grid 容器
• 左侧为
  ，承载代码编辑器（如 CodeMirror、Monaco 封装或 iframe 内嵌 HtmlEditor）
• 右侧为
  ，内含 用于安全渲染 HTML 输出
• 避免使用 <frameset></frameset> —— 已被 HTML5 废弃，现代编辑器全部基于 CSS 布局实现

用 Flex 实现稳定可调的左右分栏

Flex 是当前最主流、最可靠的选择，适合拖拽调整宽度和响应式回退：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
• 父容器设 display: flex，并加 min-width: 600px 防窄屏错乱
• 左侧编辑区用 flex: 0 0 50%（初始各占一半），或支持拖拽时动态设为 flex-basis: 420px
• 右侧预览区用 flex: 1，自动填充剩余空间；加 min-width: 300px 防压缩失效
• 高度统一靠 align-items: stretch（默认值），确保两栏等高，预览 iframe 不被截断

预览 iframe 的关键处理细节

右侧预览不是简单显示 HTML 字符串，需保障样式隔离与脚本安全：

• iframe 必须带 sandbox="allow-scripts" 属性，禁用表单提交、弹窗等高风险行为
• 通过 JavaScript 动态写入内容：iframe.contentDocument.write(htmlStr)，避免跨域限制
• 预览区内部 body 需重置默认 margin/padding，并继承编辑器设置的字体、字号，提升一致性
• 长内容溢出时，给 iframe 外层容器加 overflow: auto，而非 iframe 自身滚动

小屏适配：从左右切换为上下堆叠

当视口宽度 ≤768px 时，左右并排影响操作，应自动转为垂直布局：

• 用媒体查询 @media (max-width: 768px) 覆盖父容器为 flex-direction: column
• 此时编辑区在上、预览区在下，各自 width: 100%，高度按内容自适应
• 可选加一个切换按钮（如「↔」图标），点击后临时切回双栏，方便对比调试