Web SDK

인용 블록

Plugin 정보

인용 블록 기능을 사용하면 문서에 인용문을 삽입하고 서식을 지정해 일반 콘텐츠와 시각적으로 구분할 수 있습니다.

소개

Univer Docs의 인용 블록으로 다음 작업을 할 수 있습니다.

  • 인용문 서식 지정: 인용문에 고유한 스타일을 적용합니다.
  • 콘텐츠 중첩: 인용 블록 안에 리치 콘텐츠를 포함합니다.
  • 간편한 종료: 빈 단락에서 인용 서식을 빠르게 종료합니다.

플러그인 모드

설치

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

사용법

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

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

모바일 지원

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

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

Facade API

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

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

모든 인용 블록 가져오기

TypeScript
const doc = univerAPI.getActiveDocument()const quotes = doc?.getQuotes() ?? []

인용 블록 삽입하기

TypeScript
const doc = univerAPI.getActiveDocument()const quote = doc?.insertQuote({  startOffset: 12,  endOffset: 35,})

인용선 색상 설정

TypeScript
const quote = univerAPI.getActiveDocument()?.getQuote('quote-block-id')quote?.setLineColor('#5B5FC7')

인용문 텍스트 색상 설정

TypeScript
const quote = univerAPI.getActiveDocument()?.getQuote('quote-block-id')quote?.setTextColor('#242424')

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.