Web SDK

콜아웃

Plugin 정보

콜아웃 기능을 사용하면 아이콘과 색상을 원하는 대로 설정할 수 있는 시각적으로 구분된 블록으로 문서의 중요한 정보를 강조할 수 있습니다.

소개

Univer Docs의 콜아웃 블록으로 다음 작업을 할 수 있습니다.

  • 핵심 정보 강조: 중요한 참고 사항, 경고 또는 팁에 주의를 집중시킵니다.
  • 모양 사용자 지정: 콘텐츠에 맞는 다양한 아이콘과 색상 조합을 선택합니다.
  • 콘텐츠 구성: 시각적으로 구분된 섹션으로 문서를 구조화합니다.

플러그인 모드

설치

Shell
pnpm add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui

사용법

TypeScript
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout'import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui'import DocsCalloutUIEnUS from '@univerjs-pro/docs-callout-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-callout-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsCalloutUIEnUS,     ),  },})univer.registerPlugin(UniverDocsCalloutPlugin)univer.registerPlugin(UniverDocsCalloutUIPlugin)

Univer 상용 라이선스가 있다면 구성 방법은 클라이언트에서 라이선스 사용하기를 참고하세요.

모바일 지원

먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.

패키지데스크톱 등록모바일 등록
@univerjs-pro/docs-callout-uiUniverDocsCalloutUIPluginUniverDocsCalloutMobileUIPlugin

Facade API

API를 사용하기 전에 facade를 반드시 가져오세요.

TypeScript
import '@univerjs-pro/docs-callout/facade'

모든 콜아웃 가져오기

TypeScript
const doc = univerAPI.getActiveDocument()const callouts = doc?.getCallouts() ?? []

ID로 콜아웃 가져오기

TypeScript
const doc = univerAPI.getActiveDocument()const callout = doc?.getCallout('callout-block-id')

콜아웃 삽입하기

TypeScript
const doc = univerAPI.getActiveDocument()const callout = doc?.insertCallout({  startOffset: 12,  endOffset: 35,  config: { icon: '💡' },})

콜아웃 구성 업데이트하기

TypeScript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.updateConfig({ icon: '⚠️' })

콜아웃 모양 설정하기

TypeScript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.setIcon('📝')callout?.setBackgroundColor('#FFF4E5')callout?.setBorder({ color: '#E6A23C', width: 2 })callout?.setTextColor('#5C3B00')

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.