Web SDK

核心功能

Univer Docs 的核心功能包含了文档编辑器、公式引擎、渲染引擎、设计系统和 UI 组件库等。它们共同构成了一个强大的文档处理平台，支持多种文档格式和复杂的文档操作。

特性

Univer Docs 的核心功能包括：

  • 文档渲染：支持 Univer Docs 的渲染和光标、选区的绘制。
  • 文档排版：支持全文排版，包括段落设置，段前后间距、段落对齐、缩进和悬挂等，也包括段落中的排版能力，标点挤压、标点悬挂、字偶间距、西文断词等。
  • 公式计算：支持 Univer 公式的添加和计算（开发中）。
  • 表格能力：支持插入基本表格和表格的编辑，新增、删除行类操作，编辑单元格等。
  • 文档风格：Univer Docs 不仅支持类似 Microsoft Word 的传统文档风格（包含分页、页眉页脚等），也支持类似 Notion 的现代文档风格。在现代文档风格中，无需分页，内容可以无限扩展，支持多种官方或第三方块级元素（如文本、图片、表格等）的混合排版（计划中）。
  • 页眉页脚：支持插入页眉页脚和编辑页眉页脚内容，可以区分首页及奇偶页等，仅传统文档支持。
  • 列表功能：支持有序、无序列表和任务列表的插入和编辑，支持列表的缩进和反缩进等。
  • 表情与符号：可从 Docs 功能区插入表情和符号。
  • 插件系统：支持插件系统，可以自定义插件，如公式插件、图片插件、图表插件等，这也是 Univer 核心架构能力之一。

预设模式

安装

Shell
pnpm add @univerjs/presets @univerjs/preset-docs-core

使用

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'const { univer, univerAPI } = createUniver({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(UniverPresetDocsCoreZhCN),  },  presets: [UniverDocsCorePreset()],})univerAPI.createDocument({})

预设与配置

@univerjs/presets

本预设提供了创建 Univer 应用所需的 createUniver 方法，以及暴露了 @univerjs/core 和 @univerjs/design 的所有方法和对象。

createUniver 方法接受一个配置对象，包含主题、语言、预设等选项，返回一个 Univer 实例 univer 和用于调用 Facade API 的 FUniver 实例 univerAPI。

TypeScript
interface CreateUniverParameter {  // Univer 实例的主题，默认使用 defaultTheme  theme: IStyleSheet  // 是否使用暗黑模式，默认为 false。  darkMode?: boolean  // Univer 实例的语言环境  locale: LocaleType  region?: LocaleType  // 要使用的语言环境对象，键为语言环境类型，值为对应的语言环境对象  locales: ILocales  // Univer 实例的日志级别  logLevel?: LogLevel  // 要使用的预设列表。  presets: IPresets[]  // 要使用的插件列表。  plugins: IPlugins[]}

参考：createUniver

@univerjs/preset-docs-core

本预设是 Univer Docs 的核心预设，包含了文档编辑器、公式引擎、渲染引擎等电子文档必要的核心功能。

TypeScript
interface IUniverDocsCorePresetConfig {  // 容器元素，可以是字符串或者 DOM 元素  container?: string | HTMLElement  // 是否显示头部  header?: boolean  // 是否显示头部工具栏  toolbar?: boolean  // 头部工具栏的类型。'classic': 默认经典模式；'grid': 两行网格模式；'collapsed': 紧凑模式；'simple'：不分组模式  ribbonType?: RibbonType  // 是否显示底部。  footer?: boolean  // 是否显示右键菜单  contextMenu?: boolean  // 是否禁用自动聚焦  disableAutoFocus?: true  // 依赖注入的覆盖配置  override?: DependencyOverride  // 菜单配置  menu?: MenuConfig  // ... 更多配置项}

其中，menu 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态：

TypeScript
UniverDocsCorePreset({  menu: {    'doc.command.set-inline-format-bold': {      hidden: true,    },    'doc.command.set-inline-format-italic': {      hidden: true,      disabled: true,    },  },})

这里的 'doc.command.set-inline-format-bold' 和 'doc.command.set-inline-format-italic' 是命令的名称，表示对应的菜单项。

参考：@univerjs/preset-docs-core

插件模式

安装

Shell
pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

使用

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignZhCN from '@univerjs/design/locale/zh-CN'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIZhCN from '@univerjs/docs-ui/lib/locale/zh-CN'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIZhCN from '@univerjs/ui/locale/zh-CN'import '@univerjs/docs/facade'import '@univerjs/docs-ui/facade'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(DesignZhCN, UIZhCN, DocsUIZhCN),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverUIPlugin, {  container: 'app',})univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)const univerAPI = FUniver.newAPI(univer)univerAPI.createDocument({})

插件与配置

@univerjs/core

本插件是 Univer 的核心库，提供了创建 Univer 实例、主题、语言等基础功能。

TypeScript
interface UniverParameter {  // Univer 实例的主题，默认使用 defaultTheme  theme: IStyleSheet  // 是否使用暗黑模式，默认为 false  darkMode?: boolean  // Univer 实例的语言环境  locale: LocaleType  // 要使用的语言环境对象，键为语言环境类型，值为对应的语言环境对象  locales: ILocales  // Univer 实例的日志级别  logLevel?: LogLevel}

参考：Univer

@univerjs/engine-render

本插件是 Univer 的渲染引擎，负责渲染、滚动条、光标和选区等的绘制。其提供了 UniverRenderEnginePlugin 插件。

参考：@univerjs/engine-render

@univerjs/engine-formula

本插件是 Univer 的公式引擎，负责公式的计算和处理。其提供了 UniverFormulaEnginePlugin 插件。

参考：@univerjs/engine-formula

@univerjs/design

本插件是 Univer 的设计系统，提供了所有的基础组件和样式。

详见： UI 章节

@univerjs/ui

本插件是 Univer 的 UI 基座。其提供了 UniverUIPlugin 插件。

UniverUIPlugin 提供了一些配置项，可用于基础布局的配置。

TypeScript
interface IUniverUIConfig {  // 容器元素，可以是字符串或者 DOM 元素。  container?: string | HTMLElement  // 是否显示头部  header?: boolean  // 是否显示头部工具栏  toolbar?: boolean  // 头部工具栏的类型。'classic': 默认经典模式；'grid': 两行网格模式；'collapsed': 紧凑模式；'simple'：不分组模式  ribbonType?: RibbonType  // 是否显示右键菜单  contextMenu?: boolean  // 是否禁用自动聚焦  disableAutoFocus?: true  // 依赖注入的覆盖配置  override?: DependencyOverride  // 菜单配置  menu?: MenuConfig}

其中，menu 配置项可以用于简单地设置某些特定菜单项的显示或隐藏等状态：

TypeScript
univer.registerPlugin(UniverDocsUIPlugin, {  menu: {    'doc.command.set-inline-format-bold': {      hidden: true,    },    'doc.command.set-inline-format-italic': {      hidden: true,      disabled: true,    },  },})

这里的 'doc.command.set-inline-format-bold' 和 'doc.command.set-inline-format-italic' 是命令的名称，表示对应的菜单项。

参考：@univerjs/docs-ui

@univerjs/docs

本插件是 Univer Docs 的核心插件。其提供了 UniverDocsPlugin 插件。

参考：@univerjs/docs

@univerjs/docs-ui

本插件是 Univer Docs 的 UI 插件，包含了文档编辑器的 UI 组件和交互。其提供了 UniverDocsUIPlugin 插件。

参考：@univerjs/docs-ui

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.