Web SDK

核心功能

插件信息

Univer Slides 核心功能由演示文稿模型和浏览器编辑界面组成。模型使用 ISlideData 快照存储演示文稿，界面则通过 Univer 命令渲染和编辑该模型。

功能

  • 演示文稿模型：管理演示文稿标识、页面尺寸、幻灯片顺序、幻灯片、母版页、版式页、主题、切换效果和资源。
  • 渲染与编辑：提供幻灯片画布、缩略图、选择、剪贴板、文本与形状编辑、对齐参考线和放映能力。
  • 命令管线：通过命令和变更应用页面与元素更新，使模型、渲染以及撤销和重做保持同步。
  • Facade API：通过面向应用的对象创建和查找演示文稿、保存快照，并操作幻灯片和元素。
  • 插件架构：表格、图表、打印和导入导出等可选功能与核心插件栈相互独立。

插件模式

安装

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui

使用

TypeScript
import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverSlidesPlugin } from '@univerjs-pro/slides'import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US'import SlidesEnUS from '@univerjs-pro/slides/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs-pro/slides/facade'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs-pro/slides-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesUIPlugin)const univerAPI = FUniver.newAPI(univer)const presentation = univerAPI.createPresentation({ name: 'Quarterly review' })

如果浏览器只需要渲染演示文稿而不显示编辑控件，请为 UniverSlidesUIPlugin 传入 { editor: { enabled: false } }。在 Node.js 中，只注册 UniverSlidesPlugin，无需注册界面插件。

预设模式

Univer Slides 当前没有提供预设包。无论只使用模型还是构建浏览器编辑器，都请使用插件模式。

菜单顺序与网格布局

在已有的 UniverUIPlugin 注册配置中设置 menu 和 ribbonType。它们属于共享 UI 配置，不应传给 UniverSlidesUIPlugin。下面使用 Slides 的实际菜单项 ID：

初始化配置

TypeScript
import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.view': { order: -1 },  'ribbon.start.layout': { order: -1 },  'slide.menu.insert.text': {    order: 1,    gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 },  },  'slide.menu.insert.shape': {    order: 0,    gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true },  },}univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', menu })

order 按数值从小到大排列同级页签、分组或菜单项，不会把菜单项移到其他分组。菜单项 ID 可以从其 data-u-command 属性获取，不应直接假设它与命令 ID 相同。

运行时更新

先导入 @univerjs/ui/facade，再通过 FUniver.newAPI(univer) 创建 univerAPI。updateMenuConfig() 会合并修改、保留未指定的字段并刷新菜单，配置也会应用到后续注册的菜单。

TypeScript
import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } },})

gridLayout 仅控制网格 Ribbon。每个分组固定两行，row 和 column 从 1 开始。显式坐标优先决定位置，因此交换已占用的单元格时应同时修改两个菜单项，不能只调整 order。未指定的可选字段沿用已有配置或 Schema。跨行、跨列、标签、宽度和图标尺寸见 IRibbonGridLayout。

请保持 UniverSlidesUIPlugin 的编辑功能开启：editor.enabled: false 会跳过该品类 Ribbon 的注册。菜单覆盖配置不会创建尚未注册的按钮。

自定义按钮和子菜单入口也可以通过 createMenu()、createSubmenu() 设置 order 与 gridLayout，然后调用 appendTo() 注册。弹出菜单内部不使用 Ribbon 的网格布局。

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.