功能套件

PreviousNext

了解如何使用预配置插件和UI组件的功能套件快速搭建编辑器。

功能套件将相关插件及其UI组件打包整合，提供最快捷的编辑器功能添加方式。

什么是功能套件？

功能套件是预先组装的工具包，包含针对特定编辑器功能的多个插件和组件。

例如，BasicBlocksKit包含段落、标题、引用块和水平分割线的插件，以及对应的UI组件。

使用套件的优势

  • 快速配置：通过一次导入添加多个功能
  • 最佳实践：套件采用合理的默认配置
  • 内置UI：多数套件包含Plate UI组件
  • 简化依赖：套件自动处理插件依赖关系

套件使用 vs 手动配置

插件文档中展示两种使用方式：

  • 套件使用：使用预配置套件，推荐大多数用户采用
  • 手动配置：单独安装配置每个插件，适用于以下场景：
    • 需要自定义插件配置（超出套件默认值）
    • 需要使用不同UI组件或无UI（headless模式）
    • 仅需套件中的特定插件

套件本质上是预配置好的手动方案。

查找可用套件

在插件文档中寻找"Kit Usage"章节，这里会说明使用的套件并展示套件源代码。

示例：BasicBlocksKit

BasicBlocksKit包含以下插件和组件：

  • ParagraphPlugin及ParagraphElement
  • H1Plugin及H1Element
  • H2Plugin及H2Element
  • H3Plugin及H3Element
  • BlockquotePlugin及BlockquoteElement
  • HorizontalRulePlugin及HrElement

无需单独添加每个插件，直接使用套件：

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

即可一次性添加所有区块元素及其UI组件。

何时选择手动配置

以下情况建议手动配置：

  • 自定义配置：套件默认值不满足需求时
  • 定制UI：不使用Plate UI组件时
  • 精简配置：仅需套件中一两个插件时
  • 学习目的：需要理解插件协作机制时
Editor ConfigurationFeature Kits