For AI agents: the complete documentation index is available at https://a3s-lab.github.io/Office/docs/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/Office/docs/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/Office/docs/guide/index.md.
A3S Office
在线体验
  • 简体中文
  • latest

      • 快速开始

      安装组件库，并在宿主应用中引入一次公共样式。

      bun add @a3s-lab/office
      DocumentPage.tsx
      import { useState } from 'react';
import type { DocumentContent } from '@a3s-lab/office/core';
import { DocumentEditor } from '@a3s-lab/office/react';
import '@a3s-lab/office/styles.css';

const initialContent: DocumentContent = {
  type: 'document',
  html: '<h1>项目说明</h1><p>从这里开始编辑。</p>',
  pageSize: 'a4',
};

export function DocumentPage() {
  const [content, setContent] = useState(initialContent);

  return (
    <main style={{ height: '100vh', minHeight: 0 }}>
      <DocumentEditor content={content} onChange={setContent} />
    </main>
  );
}

      受控内容

      所有可编辑组件都是受控组件。编辑器通过 onChange 返回完整、类型化的新内容； 宿主应用负责持久化、协作、版本记录，并把确认后的值传回组件。

      不要把渲染后的 DOM 当作主要文件模型保存。应保存编辑器返回的结构化内容，只在 文件导入或导出边界调用组件库提供的 API。

      包入口

      导入路径用途
      @a3s-lab/office/core内容类型、文件辅助函数、导入、导出与预加载 API
      @a3s-lab/office/reactReact 编辑器组件
      @a3s-lab/office/vueVue 组件绑定
      @a3s-lab/office/web-componentWeb Component 注册函数
      @a3s-lab/office/styles.css编辑器与设计系统的必要样式

      宿主布局

      编辑器会填满宿主元素。宿主必须有确定高度；嵌套的 flex 或 grid 子项还需要允许 收缩，避免编辑器把页面撑开。

      .office-editor-host {
  width: 100%;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
}

      接下来可以选择框架绑定，或直接查看 DocumentEditor API。