Web SDK

コア機能

プラグイン情報

Univer Slides のコア機能は、プレゼンテーションモデルとブラウザー編集 UI で構成されます。モデルはプレゼンテーションを ISlideData スナップショットとして保存し、UI は Univer のコマンドを通じてそのモデルを描画、編集します。

機能

  • プレゼンテーションモデル：プレゼンテーション ID、ページサイズ、スライド順、スライド、マスター、レイアウト、テーマ、トランジション、リソースを管理します。
  • 描画と編集：スライドキャンバス、サムネイル、選択、クリップボード、テキストと図形の編集、配置ガイド、スライドショーを提供します。
  • コマンドパイプライン：ページと要素の変更をコマンドとミューテーションで適用し、モデル、描画、元に戻す／やり直しを同期します。
  • 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 では UI プラグインを省き、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 のみに適用されます。各グループは 2 行で、row と column は 1 から始まります。明示的な座標が位置を決めるため、使用中のセルを入れ替える際は order だけでなく両方の項目を更新してください。未指定の任意フィールドは既存の設定または Schema を引き継ぎます。行・列の結合、ラベル、幅、アイコンサイズは IRibbonGridLayout を参照してください。

UniverSlidesUIPlugin の編集機能を有効にしてください。editor.enabled: false を指定すると製品の Ribbon は登録されません。メニューの上書き設定で未登録のボタンが作成されることはありません。

カスタムボタンとサブメニューの入口も createMenu()、createSubmenu() で order と gridLayout を指定し、appendTo() で登録できます。ポップアップ内には Ribbon のグリッドレイアウトは適用されません。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.