提示框

PreviousNext

Highlight important information or add special notes.

提示框元素提示框元素
Loading…

功能特性

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

套件使用

安装

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

'use client';
 
import { CalloutPlugin } from '@platejs/callout/react';
 
import { CalloutElement } from '@/components/ui/callout-node';
 
export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];
'use client';
 
import { CalloutPlugin } from '@platejs/callout/react';
 
import { CalloutElement } from '@/components/ui/callout-node';
 
export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];

添加套件

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

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

手动使用

安装

pnpm add @platejs/callout
pnpm add @platejs/callout

添加插件

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

import { CalloutPlugin } from '@platejs/callout/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    CalloutPlugin,
  ],
});
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),
  ],
});
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

  • Insert callouts using the slash command
  • Ability to change the callout emoji
  • Beautifully crafted UI

插件

CalloutPlugin

提示框元素插件。

转换器

tf.insert.callout

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

Optionsobject

    要插入的提示框变体类型

    来自 InsertNodesOptions 的其他选项

钩子

useCalloutEmojiPicker

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

OptionsUseCalloutEmojiPickerOptions

    表情符号选择器是否打开

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

Returnsobject

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

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

类型

TCalloutElement

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

Attributes

    提示框的变体类型

    要显示的图标或表情符号