AIWiki

┌───────────────────────────────────────────────────────────────────┐ │ 📄 shadcn/directory/udecode/plate/(plugins)/(elements)/callout.cn │ └───────────────────────────────────────────────────────────────────┘

File: callout.cn.md

Updated: 11/7/2025

╔══════════════════════════════════════════════════════════════════════════════════════════════╗

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

title: 提示框 docs:

route: /docs/components/callout title: 提示框元素
route: https://pro.platejs.org/docs/components/callout-node title: 提示框元素

功能特性

可自定义的提示框区块，用于突出显示重要信息
支持不同类型的提示框变体（如信息、警告、错误）
可为提示框设置自定义图标或表情符号

</PackageInfo>

套件使用

<Steps>

安装

最快添加提示框插件的方式是使用 CalloutKit，它包含预配置的 CalloutPlugin 和 Plate UI 组件。

CalloutElement: 渲染提示框元素

添加套件

将套件添加到你的插件中：

import { createPlateEditor } from 'platejs/react';
import { CalloutKit } from '@/components/editor/plugins/callout-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...CalloutKit,
  ],
});

</Steps>

手动使用

<Steps>

安装

npm install @platejs/callout

添加插件

在创建编辑器时，将 CalloutPlugin 包含到 Plate 插件数组中。

import { CalloutPlugin } from '@platejs/callout/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    CalloutPlugin,
  ],
});

配置插件

你可以通过自定义组件来配置 CalloutPlugin 以渲染提示框元素。

import { CalloutPlugin } from '@platejs/callout/react';
import { createPlateEditor } from 'platejs/react';
import { CalloutElement } from '@/components/ui/callout-node';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    CalloutPlugin.withComponent(CalloutElement),
  ],
});

withComponent: 指定 CalloutElement 来渲染提示框元素

</Steps>

Plate Plus

插件

`CalloutPlugin`

提示框元素插件。

转换器

`tf.insert.callout`

向编辑器中插入提示框元素。

<API name="callout"> <APIOptions type="object"> <APIItem name="variant" type="string" optional> 要插入的提示框变体类型 </APIItem> <APIItem name="...InsertNodesOptions" type="InsertNodesOptions<V>"> 来自 `InsertNodesOptions` 的其他选项 </APIItem> </APIOptions> </API>

钩子

`useCalloutEmojiPicker`

管理提示框的表情符号选择器功能。

<API name="useCalloutEmojiPicker"> <APIOptions type="UseCalloutEmojiPickerOptions"> <APIItem name="isOpen" type="boolean"> 表情符号选择器是否打开 </APIItem> <APIItem name="setIsOpen" type="(isOpen: boolean) => void"> 设置表情符号选择器打开状态的函数 </APIItem> </APIOptions> <APIReturns type="object"> <APIItem name="emojiToolbarDropdownProps" type="object"> 表情符号工具栏下拉框的属性 <APISubList> <APISubListItem parent="emojiToolbarDropdownProps" name="isOpen" type="boolean"> 表情符号选择器是否打开 </APISubListItem> <APISubListItem parent="emojiToolbarDropdownProps" name="setIsOpen" type="(v: boolean) => void"> 设置表情符号选择器打开状态的函数，会考虑只读模式 </APISubListItem> </APISubList> </APIItem> <APIItem name="props" type="object"> 表情符号选择器组件的属性 <APISubList> <APISubListItem parent="props" name="isOpen" type="boolean"> 表情符号选择器是否打开 </APISubListItem> <APISubListItem parent="props" name="setIsOpen" type="(isOpen: boolean) => void"> 设置表情符号选择器打开状态的函数 </APISubListItem> <APISubListItem parent="props" name="onSelectEmoji" type="(options: { emojiValue?: any; icon?: any }) => void"> 当选择表情符号时调用的函数。它会更新提示框的图标并关闭选择器 </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>

类型

`TCalloutElement`

interface TCalloutElement extends TElement {
  variant?: string;
  icon?: string;
}

<API name="TCalloutElement"> <APIAttributes> <APIItem name="variant" type="string" optional> 提示框的变体类型 </APIItem> <APIItem name="icon" type="string" optional> 要显示的图标或表情符号 </APIItem> </APIAttributes> </API>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

╚══════════════════════════════════════════════════════════════════════════════════════════════╝

← Root | ↑ Up