提示框

PreviousNext
提示框元素提示框元素
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Display callouts with different variants and icons.
callout-demo
callout-demo

功能特性

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

套件使用

安装

最快添加提示框插件的方式是使用 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)];

添加套件

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

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

callout
callout

插件

CalloutPlugin

提示框元素插件。

转换器

tf.insert.callout

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

Optionsobject

Collapse all

    要插入的提示框变体类型

    来自 InsertNodesOptions 的其他选项

钩子

useCalloutEmojiPicker

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

OptionsUseCalloutEmojiPickerOptions

Collapse all

    表情符号选择器是否打开

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

Returnsobject

Collapse all

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

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

类型

TCalloutElement

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

Attributes

Collapse all

    提示框的变体类型

    要显示的图标或表情符号

BlockquoteCallout