引用块

PreviousNext
引用块元素
Loading...

功能特点

  • 创建引用块以强调重要信息或突出显示来自外部来源的引用。
  • 默认渲染为 <blockquote> HTML 元素。

Kit 使用

安装

添加引用块插件最快的方法是使用 BasicBlocksKit，它包含预配置的 BlockquotePlugin 以及其他基本块元素及其 Plate UI 组件。

添加 Kit

将 kit 添加到你的插件中：

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

手动使用

安装

pnpm add @platejs/basic-nodes

添加插件

在创建编辑器时，将 BlockquotePlugin 包含在你的 Plate 插件数组中。

import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    BlockquotePlugin,
  ],
});

配置插件

你可以使用特定渲染组件或自定义键盘快捷键等选项来配置 BlockquotePlugin。

import { BlockquotePlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { BlockquoteElement } from '@/components/ui/blockquote-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    BlockquotePlugin.configure({
      node: { component: BlockquoteElement },
      shortcuts: { toggle: 'mod+shift+.' },
    }),
  ],
});
  • node.component: 分配 BlockquoteElement 来渲染引用块元素。
  • shortcuts.toggle: 定义用于切换引用块格式的键盘快捷键。

转换为工具栏按钮

你可以将引用块添加到转换为工具栏按钮以切换引用块：

{
  icon: <QuoteIcon />,
  label: '引用',
  value: KEYS.blockquote,
}

插入工具栏按钮

你可以将引用块添加到插入工具栏按钮以插入引用块：

{
  icon: <QuoteIcon />,
  label: '引用',
  value: KEYS.blockquote,
}

插件

BlockquotePlugin

用于引用块元素的插件。默认渲染为 <blockquote> HTML 元素。

转换

tf.blockquote.toggle

在当前块和段落之间切换引用块。如果该块已经是引用块，则恢复为段落。如果是段落或其他块类型，则转换为引用块。

Basic ElementsBlockquote