Web SDK

고급 목록

Plugin 정보

고급 목록 기능은 중첩 목록, 사용자 지정 글머리 기호, 유연한 목록 조작 등 Univer Docs를 위한 고급 목록 기능을 제공합니다.

소개

Univer Docs의 고급 목록으로 다음 작업을 할 수 있습니다.

  • 중첩 목록 만들기: 여러 단계로 구성된 목록 계층 구조를 만듭니다.
  • 글머리 기호 사용자 지정: 다양한 글머리 기호와 번호 매기기 스타일을 사용합니다.
  • 목록 구조 조작: 목록 항목의 수준을 올리거나 내리고 순서를 변경합니다.

플러그인 모드

설치

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

사용법

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

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

모바일 지원

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

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

Facade API

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

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

목록 삽입하기

TypeScript
import { PresetListType } from '@univerjs/core'const doc = univerAPI.getActiveDocument()doc?.insertList({  startOffset: 0,  endOffset: 10,  listType: PresetListType.BULLET_LIST,})

모든 목록 가져오기

TypeScript
const doc = univerAPI.getActiveDocument()const lists = doc?.getLists() ?? []

목록 글머리 기호 유형 설정하기

TypeScript
const doc = univerAPI.getActiveDocument()doc?.setListGlyphType(0, ListGlyphType.DECIMAL)

목록 수준 설정하기

TypeScript
const doc = univerAPI.getActiveDocument()doc?.setListLevel(0, 1)

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.