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.