# 09 - 多实例示例 [← 单实例示例](./08-单实例示例.md) | [核心 API →](./02-核心API.md) 多实例场景使用 **`onlyOfficeManagerFactory`**：每个 Tab 对应唯一 `containerId`，切换 Tab 时**隐藏 DOM 而非销毁实例**，从而保留各编辑器状态。 **在线演示**：站点路由 [`/docs/demos?tab=multi`](/docs/demos?tab=multi) **完整源码**：`src/features/demo/tabs-multi-page.tsx` ## 在线演示下方为可交互的多实例 Tab 编辑器。 ## 设计要点 | 要点 | 说明 | |------|------| | 独立容器 | 每个 Tab 生成 `tab-editor-${id}` 作为 `containerId` | | 懒加载 | 首次激活 Tab 时调用 `onlyOfficeManagerFactory.open` | | 状态保留 | 非激活 Tab 用 `invisible` 隐藏，不 `destroy` | | 关闭 Tab | `onlyOfficeManagerFactory.destroy(containerId)` 释放实例 | | 页面卸载 | `onlyOfficeManagerFactory.destroyAll()` | ### Tab 数据模型 ```tsx type TabItem = { id: string; label: string; containerId: string; fileName: string; readOnly: boolean; docKind: "word" | "excel" | "ppt"; }; function createTab(index: number, docKind: DocKind): TabItem { const id = nanoid(6); const preset = DOC_PRESETS[docKind]; return { id, label: `${preset.label} ${index}`, containerId: `tab-editor-${id}`, fileName: preset.defaultFileName, readOnly: false, docKind, }; } ``` ### 打开编辑器（按 Tab） ```tsx const openTabEditor = async (tab: TabItem) => { const preset = getPreset(tab.docKind); await onlyOfficeManagerFactory.open( { containerId: tab.containerId, fileType: preset.fileType, defaultFileName: preset.defaultFileName, readOnly: tab.readOnly, theme, }, { fileName: tab.fileName, isNew: isNewDocument(tab), readOnly: tab.readOnly, }, ); initializedRef.current.add(tab.id); }; ``` ### Tab 栏 UI（切换 / 关闭 / 新建） ```tsx {tabs.map((tab) => { const isActive = activeId === tab.id; return (

{tabs.length > 1 && ( )}

); })} {(Object.keys(DOC_PRESETS) as DocKind[]).map((kind) => ( ))} ``` ### 多容器渲染（隐藏而非卸载） ```tsx {tabs.map((tab) => (

))} ``` ## 完整 Tab 页面源码以下与仓库 `src/features/demo/tabs-multi-page.tsx` 保持一致，可直接复制为 Demo 页面： ```tsx "use client"; import { memo, useEffect, useRef, useState } from "react"; import { nanoid } from "nanoid"; import { DemoButton, DemoField, DemoSelect, demoHeaderClass, demoHeaderInnerClass, demoSubtitleClass, demoTitleClass, demoToolbarClass, } from "./demo-toolbar"; import { DEFAULT_OFFICE_THEME, FILE_TYPE, ONLYOFFICE_CONTAINER_CONFIG, ONLYOFFICE_EVENT_KEYS, OFFICE_THEME_OPTIONS, onlyOfficeManagerFactory, onlyofficeEventbus, type FileType, type OfficeTheme, } from "@/components/onlyoffice-web-comp"; type DocKind = "word" | "excel" | "ppt"; type DocPreset = { label: string; badge: string; fileType: FileType; defaultFileName: string; accept: string; }; type TabItem = { id: string; label: string; containerId: string; fileName: string; readOnly: boolean; docKind: DocKind; }; const DOC_PRESETS: Record = { word: { label: "Word", badge: "W", fileType: FILE_TYPE.DOCX, defaultFileName: "New_Document.docx", accept: ".docx,.doc,.docm,.odt,.rtf,.txt", }, excel: { label: "Excel", badge: "E", fileType: FILE_TYPE.XLSX, defaultFileName: "New_Spreadsheet.xlsx", accept: ".xlsx,.xls,.ods,.csv", }, ppt: { label: "PPT", badge: "P", fileType: FILE_TYPE.PPTX, defaultFileName: "New_Presentation.pptx", accept: ".pptx,.ppt,.odp", }, }; const OnlyOfficeTabHost = memo(function OnlyOfficeTabHost({ containerId, }: { containerId: string; }) { return (

); }); function getPreset(docKind: DocKind) { return DOC_PRESETS[docKind]; } function isNewDocument(tab: TabItem) { return tab.fileName === getPreset(tab.docKind).defaultFileName; } function createTab(index: number, docKind: DocKind): TabItem { const id = nanoid(6); const preset = getPreset(docKind); return { id, label: `${preset.label} ${index}`, containerId: `tab-editor-${id}`, fileName: preset.defaultFileName, readOnly: false, docKind, }; } function createInitialTabState() { const initialTab = createTab(1, "word"); return { tabs: [initialTab], activeId: initialTab.id }; } export function TabsMultiPage({ embedded = false }: { embedded?: boolean }) { const [tabs, setTabs] = useState([]); const [activeId, setActiveId] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [theme, setTheme] = useState(DEFAULT_OFFICE_THEME); const initializedRef = useRef(new Set()); const fileInputRef = useRef(null); useEffect(() => { const { tabs: initialTabs, activeId: initialActiveId } = createInitialTabState(); setTabs(initialTabs); setActiveId(initialActiveId); }, []); const activeTab = tabs.find((tab) => tab.id === activeId); const activePreset = activeTab ? getPreset(activeTab.docKind) : null; const updateTab = (tabId: string, patch: Partial) => { setTabs((prev) => prev.map((tab) => (tab.id === tabId ? { ...tab, ...patch } : tab)), ); }; const runAction = async (action: () => Promise, message: string) => { try { setError(null); await action(); } catch (err) { setError(message); console.error(message, err); } }; const openTabEditor = async (tab: TabItem) => { const preset = getPreset(tab.docKind); await onlyOfficeManagerFactory.open( { containerId: tab.containerId, fileType: preset.fileType, defaultFileName: preset.defaultFileName, readOnly: tab.readOnly, theme, }, { fileName: tab.fileName, isNew: isNewDocument(tab), readOnly: tab.readOnly, }, ); initializedRef.current.add(tab.id); }; useEffect(() => { if (!activeId) return; const tab = tabs.find((item) => item.id === activeId); if (!tab || initializedRef.current.has(tab.id)) return; let cancelled = false; openTabEditor(tab) .then(() => { if (cancelled) { onlyOfficeManagerFactory.destroy(tab.containerId); initializedRef.current.delete(tab.id); } }) .catch((err) => { if (cancelled) return; setError("无法加载编辑器"); console.error("Failed to open tab editor:", err); }); return () => { cancelled = true; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeId, tabs]); useEffect(() => { const handleLoadingChange = (data: { loading: boolean }) => { setLoading(data.loading); }; onlyofficeEventbus.on(ONLYOFFICE_EVENT_KEYS.LOADING_CHANGE, handleLoadingChange); return () => { onlyofficeEventbus.off( ONLYOFFICE_EVENT_KEYS.LOADING_CHANGE, handleLoadingChange, ); onlyOfficeManagerFactory.destroyAll(); initializedRef.current.clear(); }; }, []); const addTab = (docKind: DocKind) => { const nextTab = createTab(tabs.length + 1, docKind); setTabs((prev) => [...prev, nextTab]); setActiveId(nextTab.id); }; const closeTab = (tabId: string) => { if (tabs.length <= 1) return; const tab = tabs.find((item) => item.id === tabId); if (tab) { onlyOfficeManagerFactory.destroy(tab.containerId); initializedRef.current.delete(tab.id); } setTabs((prev) => { const next = prev.filter((item) => item.id !== tabId); if (activeId === tabId) { setActiveId(next[0]?.id ?? ""); } return next; }); }; const ensureActiveManager = async () => { if (!activeTab) throw new Error("No active tab"); if (!initializedRef.current.has(activeTab.id)) { await openTabEditor(activeTab); } const manager = onlyOfficeManagerFactory.get(activeTab.containerId); if (!manager) throw new Error("Editor is not initialized"); return manager; }; const uploadFile = (file: File) => runAction(async () => { if (!activeTab) return; const preset = getPreset(activeTab.docKind); await onlyOfficeManagerFactory.open( { containerId: activeTab.containerId, fileType: preset.fileType, defaultFileName: preset.defaultFileName, readOnly: activeTab.readOnly, theme, }, { fileName: file.name, file, readOnly: activeTab.readOnly, }, ); initializedRef.current.add(activeTab.id); updateTab(activeTab.id, { fileName: file.name }); }, "上传失败"); const newDocument = () => runAction(async () => { if (!activeTab) return; const preset = getPreset(activeTab.docKind); await onlyOfficeManagerFactory.open( { containerId: activeTab.containerId, fileType: preset.fileType, defaultFileName: preset.defaultFileName, readOnly: activeTab.readOnly, theme, }, { fileName: preset.defaultFileName, isNew: true, readOnly: activeTab.readOnly, }, ); initializedRef.current.add(activeTab.id); updateTab(activeTab.id, { fileName: preset.defaultFileName }); }, "新建失败"); const exportDocument = () => runAction(async () => { const manager = await ensureActiveManager(); await manager.downloadExport(); }, "导出失败"); const toggleReadOnly = () => runAction(async () => { if (!activeTab) return; const preset = getPreset(activeTab.docKind); const manager = await ensureActiveManager(); const nextReadOnly = !activeTab.readOnly; if (manager.isReady()) { await manager.setReadOnly(nextReadOnly); } else { await onlyOfficeManagerFactory.open( { containerId: activeTab.containerId, fileType: preset.fileType, defaultFileName: preset.defaultFileName, readOnly: nextReadOnly, theme, }, { fileName: activeTab.fileName, isNew: isNewDocument(activeTab), readOnly: nextReadOnly, }, ); } updateTab(activeTab.id, { readOnly: nextReadOnly }); }, "切换模式失败"); const applyTheme = (nextTheme: OfficeTheme) => runAction(async () => { setTheme(nextTheme); await Promise.all( tabs.map(async (tab) => { if (!initializedRef.current.has(tab.id)) return; const manager = onlyOfficeManagerFactory.get(tab.containerId); if (manager?.isReady()) { await manager.setTheme(nextTheme); } }), ); }, "切换主题失败"); return (

{embedded ? "示例" : "多实例"}

{activeTab ? `${activePreset?.label} · ${activeTab.fileName}` : "切换标签页，实例状态会保留"}

applyTheme(event.target.value as OfficeTheme) } > {OFFICE_THEME_OPTIONS.map((option) => ( ))} fileInputRef.current?.click()}> 上传新建{activePreset?.label ?? "文档"} 导出 {activeTab?.readOnly ? "只读" : "编辑"}

{tabs.map((tab) => { const preset = getPreset(tab.docKind); const isActive = activeId === tab.id; return (

{tabs.length > 1 && ( )}

); })}

{(Object.keys(DOC_PRESETS) as DocKind[]).map((kind) => { const preset = getPreset(kind); return ( ); })}

{error && (

{error}

)}

{tabs.length === 0 && (

加载中...

)} {tabs.map((tab) => (

))} {loading && (

加载中...

)}

{ const file = event.target.files?.[0]; if (file) { uploadFile(file); if (fileInputRef.current) fileInputRef.current.value = ""; } }} />

); } ```