Web SDK

핵심 기능

Plugin 정보

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에만 적용됩니다. 각 그룹은 두 행이며 row와 column은 1부터 시작합니다. 명시적 좌표가 위치를 결정하므로 사용 중인 셀을 교환할 때는 order만 바꾸지 말고 두 항목을 함께 업데이트하세요. 지정하지 않은 선택 필드는 기존 설정이나 Schema를 유지합니다. 행·열 확장, 레이블, 너비와 아이콘 크기는 IRibbonGridLayout을 참고하세요.

UniverSlidesUIPlugin의 편집 기능을 활성화하세요. editor.enabled: false이면 해당 제품의 Ribbon을 등록하지 않습니다. 메뉴 재정의 설정은 등록되지 않은 버튼을 생성하지 않습니다.

사용자 정의 버튼과 하위 메뉴 진입점도 createMenu(), createSubmenu()에 order와 gridLayout을 전달하고 appendTo()로 등록할 수 있습니다. 팝업 내부에는 Ribbon 그리드 레이아웃이 적용되지 않습니다.

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.