基础元素 - Plate

<Cards> <Card icon="heading" title="标题" href="/docs/heading"> 创建不同层级的标题来组织内容结构。 </Card> <Card icon="blockquote" title="引用块" href="/docs/blockquote"> 通过样式化引用来强调重要信息。 </Card> <Card icon="horizontal-rule" title="水平分割线" href="/docs/horizontal-rule"> 插入水平线来分隔内容。 </Card> </Cards> <ComponentPreview name="basic-blocks-demo" />

套件使用

<Steps>

安装

BasicBlocksKit 捆绑了段落、标题（H1、H2、H3）、引用块和水平分割线的插件，以及它们对应的 Plate UI 组件。同时也注册了标题、引用块和水平分割线自带的 Markdown input rules。

ParagraphElement: 渲染段落元素。
H1Element: 渲染 H1 元素。
H2Element: 渲染 H2 元素。
H3Element: 渲染 H3 元素。
BlockquoteElement: 渲染引用块元素。
HrElement: 渲染水平分割线元素。

添加套件

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

tsx

import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...BasicBlocksKit,
  ],
});

</Steps>

该套件默认启用常见的块级 Markdown 快捷输入：

# 、## 、### 用于标题
> 用于引用块
--- 和 ___ 用于水平分割线

完整运行时模型请参阅 Plugin Input Rules。

手动安装

bash

npm install @platejs/basic-nodes

如需单独配置插件，请查看上方链接对应的具体插件文档页面。