引用块
引用块功能允许您在文档中插入和格式化引用文本,并应用与普通内容不同的视觉样式。
介绍
在 Univer Docs 中,引用块使您能够:
- 格式化引用文本:为引文应用独特的样式。
- 嵌套内容:在引用块中包含富文本内容。
- 轻松退出:快速从空段落退出引用格式。
插件模式
安装
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-ui使用
TypeScript
import { UniverDocsQuotePlugin } from '@univerjs-pro/docs-quote'import { UniverDocsQuoteUIPlugin } from '@univerjs-pro/docs-quote-ui'import DocsQuoteUIZhCN from '@univerjs-pro/docs-quote-ui/locale/zh-CN'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-quote-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( DocsQuoteUIZhCN, ), },})univer.registerPlugin(UniverDocsQuotePlugin)univer.registerPlugin(UniverDocsQuoteUIPlugin)如果您拥有 Univer 商业许可证,请参阅在客户端使用许可证进行配置。
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')你觉得这篇文档如何?