Quote Block
Plugins Info
The quote block feature allows you to insert and format quoted text in a document, with visual styling that distinguishes quotes from regular content.
Introduction
In Univer Docs, quote blocks enable you to:
- Format quoted text: Apply distinctive styling to quotations.
- Nest content: Include rich content within quote blocks.
- Easy exit: Quickly exit quote formatting from empty paragraphs.
Plugin Mode
Installation
Shell
pnpm add @univerjs-pro/docs-quote @univerjs-pro/docs-quote-uiShell
npm install @univerjs-pro/docs-quote @univerjs-pro/docs-quote-uiShell
yarn add @univerjs-pro/docs-quote @univerjs-pro/docs-quote-uiShell
bun add @univerjs-pro/docs-quote @univerjs-pro/docs-quote-uiUsage
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)If you have a commercial license for Univer, please refer to Using License in Client for configuration.
Facade API
Make sure to import the facade before using the API:
TypeScript
import '@univerjs-pro/docs-quote/facade'Get All Quote Blocks
TypeScript
const doc = univerAPI.getActiveDocument()const quotes = doc?.getQuotes() ?? []Insert a Quote Block
TypeScript
const doc = univerAPI.getActiveDocument()const quote = doc?.insertQuote({ startOffset: 12, endOffset: 35,})Set the quote line color
TypeScript
const quote = univerAPI.getActiveDocument()?.getQuote('quote-block-id')quote?.setLineColor('#5B5FC7')Set the quote text color
TypeScript
const quote = univerAPI.getActiveDocument()?.getQuote('quote-block-id')quote?.setTextColor('#242424')How is this guide?