快速开始

← 概述 | 核心 API →

推荐方式：OnlyOfficeManager

业务页面优先使用 OnlyOfficeManager 门面。create / createWithFile 内部会自动调用 initializeOnlyOffice()，无需手动初始化。

1. 添加编辑器容器

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

export function EditorHost() {
  return (
    <div
      className={`${ONLYOFFICE_CONTAINER_CONFIG.PARENT_CLASS_NAME} relative flex-1`}
    >
      <div id={ONLYOFFICE_ID} className="absolute inset-0" />
    </div>
  );
}

2. 新建空白文档

import {
  OnlyOfficeManager,
  ONLYOFFICE_ID,
  FILE_TYPE,
} from "@/components/onlyoffice-web-comp";

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

3. 打开已有 File（先取文件，再挂载）

const file = await fetch("/test.xlsx")
  .then((r) => r.blob())
  .then((blob) => new File([blob], "test.xlsx", { type: blob.type }));

const manager = await OnlyOfficeManager.createWithFile(
  {
    containerId: ONLYOFFICE_ID,
    fileType: FILE_TYPE.XLSX,
    defaultFileName: "test.xlsx",
  },
  file,
);

4. 常用操作

import { OFFICE_THEME } from "@/components/onlyoffice-web-comp";

await manager.openFile(uploadedFile);       // 切换文档
await manager.openNew("New_Document.docx"); // 新建
await manager.downloadExport();             // 导出下载
manager.toggleReadOnly();                   // 切换只读
await manager.toggleLanguage();             // 切换中/英
await manager.setTheme(OFFICE_THEME.DARK);  // 切换界面主题
manager.destroy();                          // 销毁

多实例容器

每个实例使用唯一 containerId，父级设置 data-onlyoffice-container-id：

import { ONLYOFFICE_CONTAINER_CONFIG } from "@/components/onlyoffice-web-comp";

export function MultiEditorPage() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {["editor-1", "editor-2", "editor-3"].map((id) => (
        <div
          key={id}
          className={`${ONLYOFFICE_CONTAINER_CONFIG.PARENT_CLASS_NAME} relative`}
          data-onlyoffice-container-id={id}
        >
          <div id={id} className="absolute inset-0" />
        </div>
      ))}
    </div>
  );
}

多实例打开文档使用 onlyOfficeManagerFactory.open()，见 核心 API。

注意：多实例下必须用 data-onlyoffice-container-id 精确定位容器，避免图片上传等操作路由到错误实例。

底层方式（高级）

需要直接控制 EditorManager 时，可使用 createEditorView 或 editorManagerFactory。详见 核心 API。

EditorManager.create() 同样会在内部调用 initializeOnlyOffice()，一般不必提前手动初始化。仅在使用 OnlyOfficeManager.fromEditor() 自行绑定时，需确保 SDK 已加载。