引用块

引用块元素
Loading...
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>
  );
}

功能特点

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

Kit 使用

安装

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

'use client';
 
import {
  BlockquotePlugin,
  H1Plugin,
  H2Plugin,
  H3Plugin,
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { BlockquoteElement } from '@/components/ui/blockquote-node';
import { H1Element, H2Element, H3Element } from '@/components/ui/heading-node';
import { HrElement } from '@/components/ui/hr-node';
import { ParagraphElement } from '@/components/ui/paragraph-node';
 
export const BasicBlocksKit = [
  ParagraphPlugin.withComponent(ParagraphElement),
  H1Plugin.configure({
    node: {
      component: H1Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+1' } },
  }),
  H2Plugin.configure({
    node: {
      component: H2Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+2' } },
  }),
  H3Plugin.configure({
    node: {
      component: H3Element,
    },
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: { toggle: { keys: 'mod+alt+3' } },
  }),
  BlockquotePlugin.configure({
    node: { component: BlockquoteElement },
    shortcuts: { toggle: { keys: 'mod+shift+period' } },
  }),
  HorizontalRulePlugin.withComponent(HrElement),
];

添加 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

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