Web SDK

핵심 기능

Plugin 정보

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는 UniverBoardsUIPlugin이 아니라 기존 UniverUIPlugin 등록 설정에 추가합니다. 다음 예제는 복제 항목을 해당 메뉴 그룹의 맨 앞으로 옮깁니다.

초기 설정

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는 data-u-command 속성에서 확인할 수 있습니다. 명령 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.