预览模式
mode="preview" 是内容展示态,不是特殊分支架构。
vue
<YanivEditor mode="preview" preset="basic" :initial-content="html" />
<YanivInlineEditor :content="html" mode="preview" />行为
| 项 | preview 行为 |
|---|---|
| 内容编辑 | ❌ editable=false |
| 顶栏 / 底栏 | ❌ 隐藏 |
| 浮动菜单 / 块菜单 | ❌ 隐藏 |
| 上下文编辑条 | ❌ 隐藏 |
| 链接 | ✅ 可点击 |
| 视频 | ✅ 可播放 |
| 滚动 / 选中 | ✅ 正常 |
实现要点
chromePolicy.showEditChrome=false;编辑 chrome(顶栏、底栏、上下文条、块菜单)整体v-if卸载- 扩展注册集合不因 phase 变化;interaction 扩展通过
isEditable守卫 + 事务过滤器拦截 applyPhaseTransition的顺序是「edit → preview:先 emit 再setEditable(false);preview → edit:先setEditable(true)再 emit」,保证订阅方的清理命令在editable=true时刻执行
当前只有一个 phase 订阅方
EditorShell 订阅 onPhaseChange,切到 preview 时只做 blockMenuHost.hide()。格式刷、查找替换等没有注册 phase 清理回调——它们的状态复位依赖对应按钮组件随顶栏一起卸载。详见 格式刷 与 查找替换。
CSS 选择器
根节点绑定 data-phase="preview"(已移除旧 .is-preview class):
css
.yaniv-editor[data-phase="preview"] .my-overlay {
display: none;
}