提示框

PreviousNext
提示框元素提示框元素
Loading...

功能特性

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

套件使用

安装

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

添加套件

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

import { createPlateEditor } from 'platejs/react';
import { CalloutKit } from '@/components/editor/plugins/callout-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...CalloutKit,
  ],
});

手动使用

安装

pnpm add @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),
  ],
});

Plate Plus

插件

CalloutPlugin

提示框元素插件。

转换器

tf.insert.callout

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

Optionsobject

  • variant optional string

    要插入的提示框变体类型

  • ...InsertNodesOptions InsertNodesOptions<V>

    来自 InsertNodesOptions 的其他选项

钩子

useCalloutEmojiPicker

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

OptionsUseCalloutEmojiPickerOptions

Collapse all

  • isOpen boolean

    表情符号选择器是否打开

  • setIsOpen (isOpen: boolean) => void

    设置表情符号选择器打开状态的函数

Returnsobject

Collapse all

  • emojiToolbarDropdownProps object

    表情符号工具栏下拉框的属性

  • props object

    表情符号选择器组件的属性

类型

TCalloutElement

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

Attributes

Collapse all

  • variant optional string

    提示框的变体类型

  • icon optional string

    要显示的图标或表情符号

BlockquoteCallout