UNIDOC / KNOWLEDGE IN MOTION
嵌入模式简要说明
从理解,到动手实现。步骤、协议与可复制的示例,都在这份文档中。
UniDoc 的嵌入模式由 URL 明确开启,编辑器逻辑、文档格式和宿主通信协议保持不变。
入口
http://127.0.0.1:8137/?embed=1- 顶层窗口打开:显示一行“开始”编辑工具并隐藏整条底部状态栏;点击 SVG 展开图标可展开完整功能区和状态栏,再次点击返回精简模式。
- 放入 iframe:首屏是无功能区、无状态栏的 Outlook 式流式编辑画布;第一次点击正文后只显示“开始”,状态栏继续隐藏。
embed=1默认流式;embed=0保留旧版分页语义。- 也可显式设置
embedView=flow或embedView=paged。 embedUi=full可直接以完整功能区启动,主要用于受信宿主或诊断。embedZoom=80设置初始文档比例;embedFit=width持续按 iframe 实际宽度适配。- 全屏图标与展开功能区图标独立;浏览器全屏需 iframe 设置
allow="fullscreen"/allowfullscreen。 - 内嵌工具栏用 UniDoc 全屏图标替换 ¶;精简且非全屏时禁用内部手动缩放,宿主比例与自动适宽仍生效,退出展开/全屏恢复原比例。宿主 CSS 全屏回退需回传
unidoc:fullscreen-state。
<iframe
src="http://127.0.0.1:8137/?embed=1&embedView=flow"
title="UniDoc 编辑器">
</iframe>URL 模板
内置模板:
/?embed=1&template=blank
/?embed=1&template=builtin:meeting
/?embed=1&template=ppt169内置键为blank、ppt169、ppt43、meeting、weekly、resume,也可直接传模板中文名。
当前浏览器中用户保存的模板:
/?embed=1&template=user:合同模板
/?embed=1&template=user:0从 URL 加载自定义 UDOC3 或 UniDoc JSON 模板:
/?embed=1&templateUrl=%2Ftemplates%2Fcontract.udoc&templateName=合同
/?embed=1&templateUrl=https%3A%2F%2Fcdn.example.com%2Ftemplates%2Fletter.udoctemplateUrl只接受http/https。跨域地址必须由模板服务器允许 CORS;UDOC3仍执行目录、尺寸、
哈希和文档类型校验。URL 模板完成或失败后,unidoc:ready才会发给宿主。
iframe 消息
现有unidoc:set、unidoc:get和unidoc:get-udoc协议不变。新增/补充状态字段:
window.addEventListener('message', event => {
// frame 为宿主自己的 iframe 元素。
if (event.origin !== new URL(frame.src).origin || event.source !== frame.contentWindow) return;
if (event.data?.type === 'unidoc:ready') {
console.log(event.data.mode); // passive | home | full
console.log(event.data.view); // flow | paged
console.log(event.data.template.status); // blank | ready | error
}
if (event.data?.type === 'unidoc:mode') {
console.log(event.data.mode); // home | full
}
});同源宿主或自动化还可以使用iframe.contentWindow.UniDocEmbed的wake()、setExpanded(boolean)和ready。跨域宿主应使用postMessage状态,不直接访问 iframe DOM。