返回编辑器
可视化编辑：自定义 Html #1
实时同步
PRD 注释与交互说明

页面定位 (Standalone)

  • 本页面为独立可视化编辑器页面，从"V1主题编辑器"的配置面板中点击【可视化编辑】按钮进入。
  • 以全屏沉浸式形式呈现，脱离主题编辑器上下文，专注于内容替换操作。

顶部操作栏

  • 返回按钮：左上角"返回编辑器"支持退回到主题编辑器页面。
  • 模块标识：显示当前编辑的模块名称及编号。
  • 同步状态：实时显示当前编辑同步状态指示器。
  • 操作按钮：取消 / 保存并返回。

设备预览切换

  • 支持三种预览宽度：桌面端（1000px）、平板端（768px）、移动端（375px）。
  • 切换时预览区域等比例缩放显示，无需刷新页面。

可视化编辑规则

  • 元素探测：鼠标悬浮在 H1/H2/H3/P/SPAN/BUTTON/IMG 上显示蓝色选区框。
  • 内容优先：仅允许文本内容、图片 Src 的替换，禁止改变 HTML 层级结构。
  • 右侧操作面板：点击元素后，右侧面板动态切换为文本编辑或图片编辑表单。
  • 编辑记录：面板底部展示本次编辑会话的变更历史。

保存与退出

  • 保存：将当前 DOM 内容序列化回 HTML 字符串，回写至主题编辑器的代码输入区。
  • 取消：放弃所有修改，直接返回主题编辑器页面。