Web SDK

コア機能

プラグイン情報

Univer Boards のコアは、ページと要素のモデルにインタラクティブなブラウザーキャンバスを組み合わせたものです。モデルと UI は 2 つの Web SDK パッケージで提供され、独立した UNIVER_BOARD ユニットとして動作します。

機能

  • ページと要素の順序：ページを pages に、描画可能なオブジェクトを各ページの elements に保存し、両方の階層で明示的な順序配列を使用します。
  • キャンバス要素：テキスト、図形、画像、コネクター、グループ、コンテナ、スイムレーンを扱います。
  • コマンド駆動の編集：要素の変更、順序、親子関係を 1 つのコマンド層に集約し、権限と、任意の履歴・コラボレーション統合用フックを提供します。
  • ブラウザーキャンバス：要素を描画し、選択、変形、クリップボード、テキスト編集、ビューポート操作、パネルを提供します。
  • 拡張可能なアダプター：表、マインドマップ、グラフ、リソース、印刷、交換などの任意の Boards 機能を追加できます。
  • 永続化：ページ、リソース、テーマ、アクティブページの状態を含む IBoardData スナップショットを作成、復元、保存します。

プラグインモード

インストール

インストールと基本的な使用方法で説明する Univer ランタイムに、2 つの Boards パッケージを追加します。

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

製品プラグインの登録

インストールガイドに従って共有の描画、ドキュメント、Drawing、インク、図形編集の依存関係と ライセンスを先に登録し、その後に 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.