单实例示例

← 快速开始 | 多实例示例 →

单实例场景使用 OnlyOfficeManager 门面：一个页面、一个 containerId、一个编辑器实例。适合文档详情、预览、简单编辑页。

在线演示：站点路由 /docs/demos/single
完整源码：src/features/demo/office-preview-page.tsx

在线演示

下方为可交互的单实例编辑器。

核心思路

1. 挂载固定 containerId 的 DOM 容器
2. OnlyOfficeManager.create 初始化空白文档，或 createWithFile 打开本地文件
3. 工具栏调用 openDocument / downloadExport / toggleReadOnly / setTheme / toggleLanguage / printLogs
4. 页面卸载时 manager.destroy()

容器组件

"use client";

import { memo } from "react";
import {
  ONLYOFFICE_CONTAINER_CONFIG,
  ONLYOFFICE_ID,
} from "@/components/onlyoffice-web-comp";

const OnlyOfficeHost = memo(function OnlyOfficeHost() {
  return (
    <div
      className={`${ONLYOFFICE_CONTAINER_CONFIG.PARENT_CLASS_NAME} absolute inset-0`}
    >
      <div id={ONLYOFFICE_ID} className="absolute inset-0" />
    </div>
  );
});

初始化与销毁

useEffect(() => {
  let unsubscribeLoading: (() => void) | undefined;
  let disposed = false;
  const containerId = ONLYOFFICE_ID;

  const init = async () => {
    editorManagerFactory.destroy(containerId);
    const loadSession = editorManagerFactory.beginLoadSession(containerId);

    const manager = await OnlyOfficeManager.create({
      containerId,
      fileType: FILE_TYPE.DOCX,
      defaultFileName: "New_Document.docx",
      readOnly,
      theme: currentTheme,
      loadSession,
    });

    if (
      disposed ||
      !editorManagerFactory.isLoadSessionActive(containerId, loadSession)
    ) {
      return;
    }

    managerRef.current = manager;
    setEditorReady(true);
    unsubscribeLoading = manager.onLoadingChange(({ loading: next }) => {
      setLoading(next);
    });
  };

  init().catch(() => setError("无法加载编辑器组件"));

  return () => {
    disposed = true;
    unsubscribeLoading?.();
    managerRef.current?.destroy();
    editorManagerFactory.destroy(containerId);
    managerRef.current = null;
  };
}, []);

工具栏操作

const handleOpenDocument = (fileName: string, file?: File) =>
  managerRef.current?.openDocument({ fileName, file, readOnly });

const handleExport = () => managerRef.current?.downloadExport();

const handleToggleReadOnly = async () => {
  await managerRef.current?.toggleReadOnly();
  setReadOnly(managerRef.current?.getReadOnly() ?? false);
};

const handleThemeChange = async (theme: OfficeTheme) => {
  await managerRef.current?.setTheme(theme);
  setCurrentThemeState(managerRef.current?.getTheme() ?? theme);
};

const handleLanguageSwitch = async () => {
  const nextLang = await managerRef.current?.toggleLanguage();
  setCurrentLangState(nextLang);
};

页面结构

export function OfficePreviewPage({ embedded = false, ...props }) {
  return (
    <div className={`flex flex-col bg-white ${embedded ? "h-full min-h-0" : "h-screen"}`}>
      <header>{/* 语言 / 主题 / 上传 / 新建 / 导出 / 只读 */}</header>
      <div className="relative min-h-0 flex-1">
        <OnlyOfficeHost />
        {loading && <LoadingOverlay />}
      </div>
      <input ref={fileInputRef} type="file" className="hidden" onChange={...} />
    </div>
  );
}

支持能力