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

如果您擁有 Univer 商業授權，請參閱在用戶端使用授權進行配置。

行動裝置支援

先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

套件桌面版註冊行動版註冊
@univerjs-pro/docs-callout-uiUniverDocsCalloutUIPluginUniverDocsCalloutMobileUIPlugin

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')

提示區塊外觀修改透過文件命令執行，支援復原、重做和協同。setTextColor() 為區塊內所有文字設定顏色；使用 resetTextColor() 移除此覆寫，恢復繼承的文件文字顏色。

TypeScript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.resetTextColor()

你覺得這篇文檔如何？

© 2026 DreamNum Co., Ltd.