Web SDK

核心功能

插件信息

Univer Boards 核心功能将页面与元素模型和交互式浏览器画布组合在一起。模型和 UI 由两个 Web SDK 包提供，并作为独立的 UNIVER_BOARD 单元运行。

功能

  • 页面与元素顺序：页面存储在 pages 中，可绘制对象存储在每个页面的 elements 中，两个层级都使用显式顺序数组。
  • 画布元素：处理文本、形状、图片、连接线、组、容器和泳道。
  • 命令驱动的编辑：让元素变更、顺序和父子关系统一经过命令层，并提供权限及可选历史记录和协同集成所需的挂钩。
  • 浏览器画布：渲染元素，并提供选择、变换、剪贴板、文本编辑、视口控制和面板功能。
  • 可扩展适配器：添加表格、思维导图、图表、资源、打印和交换等可选 Boards 能力。
  • 持久化：创建、恢复和保存包含页面、资源、主题与活动页面状态的 IBoardData 快照。

插件模式

安装

在安装与基础使用介绍的 Univer 运行时中加入两个 Boards 产品包：

Shell
pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui

注册产品插件

按照安装指南先注册共享的渲染、文档、绘图、墨迹、形状编辑依赖和 许可证，再注册 Boards 插件：

TypeScript
import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import '@univerjs-pro/boards-ui/lib/index.css'univer.registerPlugin(UniverBoardsPlugin)univer.registerPlugin(UniverBoardsUIPlugin)

UniverBoardsPlugin 注册 Board 模型、命令、元素服务、适配器和权限。UniverBoardsUIPlugin 添加渲染画布与浏览器交互。

预设模式

Univer Boards 目前没有专用预设。模型和浏览器 UI 都应使用插件模式。

菜单配置与画布工具栏

Boards 的右键菜单使用共享的 MenuConfig。将 menu 加到已有的 UniverUIPlugin 注册配置中，不应传给 UniverBoardsUIPlugin。例如，将“创建副本”移到所在右键菜单分组的最前面：

初始化配置

TypeScript
import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'board.menu.duplicate-selection': { order: -1 },}univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })

order 按数值从小到大排列同级右键菜单项，不会把菜单项移到其他分组。请使用产品菜单定义中的菜单项 ID，它可能与命令 ID 不同。

运行时更新

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

TypeScript
import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'board.menu.duplicate-selection': { order: 5 },})

画布工具栏

Boards 使用独立的画布工具栏，不注册标准的品类 Ribbon。gridLayout 只控制共享的网格 Ribbon，不会重排画布工具栏或右键菜单。画布工具通过 UniverBoardsUIPlugin.toolbar.tools 配置，例如在已有插件注册中关闭画笔工具：

TypeScript
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'univer.registerPlugin(UniverBoardsUIPlugin, {  toolbar: { tools: { pen: false } },})

toolbar.tools 控制工具是否可用，不提供工具顺序或网格位置配置。画布控件与共享菜单的区别见 Boards UI 参考。

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.