Web SDK

标注块

插件信息

标注块功能允许您在文档中以视觉上醒目的区块高亮显示重要信息，并支持自定义图标和颜色。

介绍

在 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 DocsCalloutUIZhCN from '@univerjs-pro/docs-callout-ui/locale/zh-CN'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-callout-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      DocsCalloutUIZhCN,     ),  },})univer.registerPlugin(UniverDocsCalloutPlugin)univer.registerPlugin(UniverDocsCalloutUIPlugin)

如果您拥有 Univer 商业许可证，请参阅在客户端使用许可证进行配置。

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.