Plate

模板

您可以选择以下模板之一开始使用：

选项	Plate	插件	AI	后端
类似Notion的模板	✅	✅	✅	✅
Plate Playground模板	✅	✅	✅
Plate极简模板	✅

文档

您可以通过查看我们的文档了解更多关于Plate的信息。

贡献

要开始贡献，请参阅我们的贡献指南。

贡献者

我们非常欢迎您的加入！无论是给我们一颗🌟星、提交一个📥Pull Request，还是分享您的插件，您的支持都将受到我们的衷心感谢。

需要更多帮助吗？欢迎加入我们的Discord，我们将随时为您提供指导。

中文文档

您可以通过查看我们的中文文档了解更多关于Plate的信息。如果您需要中文支持，欢迎加入我们的Discord中文频道，我们的社区成员将很乐意用中文为您解答问题。

对于贡献者，我们也提供了中文贡献指南，帮助您参与到Plate的开发中。

Plate 快速上手指南

Plate 是一个基于 slate-react 构建的富文本编辑器框架，以其插件系统、无头组件（Headless）和现代化的 UI 原语著称。它旨在帮助开发者快速构建功能强大且美观的编辑器应用。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• Node.js: 建议安装 LTS 版本（v18+ 或 v20+）。
• 包管理器: npm, yarn, pnpm 或 bun 均可。
• 前端框架: 需要 React 项目环境（支持 Next.js, Vite, Create React App 等）。
• 依赖库: Plate 核心依赖 slate, slate-react 和 slate-history，通常安装核心包时会自动处理或需按文档配合安装。

国内加速建议： 如果下载依赖较慢，建议使用国内镜像源安装依赖：

# 使用 pnpm (推荐)
pnpm config set registry https://registry.npmmirror.com

# 或使用 npm
npm config set registry https://registry.npmmirror.com

安装步骤

Plate 提供了多种模板供快速启动，推荐使用官方提供的 CLI 模板或直接安装核心包。

方式一：使用官方模板（推荐）

这是最快捷的方式，包含了预设的插件和 UI 组件。你可以选择以下任一模板克隆项目：

1. 最小化模板 (Minimal) 仅包含核心功能，适合从零开始定制。

git clone https://github.com/udecode/plate-template.git my-plate-app
cd my-plate-app
pnpm install
pnpm dev

2. 游乐场模板 (Playground) 包含丰富的插件示例和 AI 功能集成。

git clone https://github.com/udecode/plate-playground-template.git my-plate-app
cd my-plate-app
pnpm install
pnpm dev

3. Notion 风格模板 (Potion) 包含完整的后端集成、AI 功能和类似 Notion 的交互体验（部分为 Pro 版特性）。

# 访问 https://pro.platejs.org/docs/templates/potion 获取详细指引

方式二：在现有项目中手动安装

如果你想在现有的 React 项目中集成 Plate，请安装核心包和所需插件：

# 安装核心包及基础依赖
pnpm add @platejs/core slate slate-react slate-history

# 安装常用插件 (例如：基础段落、标题、加粗等)
pnpm add @platejs/plugin-basic-marks @platejs/plugin-paragraph @platejs/plugin-heading

基本使用

以下是一个最简单的 Plate 编辑器示例，展示如何初始化编辑器并渲染基础内容。

1. 创建编辑器实例

在你的 React 组件中，使用 useCreateEditor 钩子来创建编辑器实例，并配置所需的插件。

import { useCreateEditor } from '@platejs/core';
import { Plate } from '@platejs/core';
import { ParagraphPlugin } from '@platejs/plugin-paragraph';
import { HeadingPlugin } from '@platejs/plugin-heading';
import { BoldPlugin } from '@platejs/plugin-basic-marks';

export default function SimpleEditor() {
  // 初始化编辑器，注册插件
  const editor = useCreateEditor({
    plugins: [
      ParagraphPlugin,
      HeadingPlugin,
      BoldPlugin,
      // 在这里添加更多插件...
    ],
    value: [
      {
        type: 'h1',
        children: [{ text: '欢迎使用 Plate' }],
      },
      {
        type: 'p',
        children: [{ text: '这是一个简单的富文本编辑器示例。' }],
      },
    ],
  });

  return (
    <div style={{ border: '1px solid #ccc', padding: '20px' }}>
      {/* Plate 提供者组件 */}
      <Plate editor={editor}>
        {/* 编辑区域 */}
        <div contentEditable style={{ outline: 'none' }} />
      </Plate>
    </div>
  );
}

2. 使用 UI 组件（可选）

Plate 提供了基于 Radix UI 和 shadcn/ui 构建的无样式或预样式组件。如果你使用了模板项目，可以直接导入现成的组件来替换原生的 contentEditable 以获得更好的体验和工具栏支持。

// 示例：使用模板中提供的现成组件结构
import { PlateContent } from '@platejs/components';

<Plate editor={editor}>
  <PlateContent 
    className="min-h-[500px] p-4" 
    placeholder="输入内容..." 
  />
</Plate>

下一步

• 访问 Plate 官方文档 查看完整的插件列表和 API 说明。
• 加入 Discord 社区 获取实时支持（包含中文频道）。
• 查看 中文贡献指南 参与开源建设。