Plate UI 安装 - Plate

本指南详细介绍如何安装 Plate UI，即 Plate 的组件层。请选择适合您项目的方法：

CLI 安装（推荐）： 使用 shadcn CLI 快速设置。
手动安装： 对设置过程有更多控制。

CLI 安装（推荐）

这是集成 Plate UI 核心依赖和基础样式的最快方式。

<Steps>

安装 Plate UI

<Callout type="info"> 如果您没有使用 Next.js，请在继续之前参考官方的 [shadcn/ui 安装指南](https://ui.shadcn.com/docs/installation) 了解您特定框架的安装方法。 </Callout>

bash

npx shadcn@latest add @plate/plate-ui

基本用法

安装 Plate UI 核心后，请继续阅读适合您框架的指南：

Next.js 指南 - 适用于服务端渲染应用（Next、Remix 等）
React 指南 - 适用于单页应用（Vite、React Router 等）

</Steps>

手动安装

如果您偏好逐步安装或不使用 shadcn CLI，请按照以下步骤操作：

<Steps>

安装 Plate

bash

npm install platejs

<Callout type="note" title="插件依赖"> 手动安装 Plate 时，您需要为要使用的每个插件添加特定的包。例如，如果您想使用 `AIMenu` 组件，则需要 `@platejs/ai` 及其依赖项。请查看每个组件的文档了解其所需的包，或使用 CLI 自动安装所需的包。 </Callout>

配置 CSS 变量

将以下 CSS 变量添加到您的全局样式表中：

css

:root {
  /* Base brand color for Plate UI components */
  --brand: oklch(0.623 0.214 259.815);
}

.dark {
  --brand: oklch(0.707 0.165 254.624);
}

添加组件

安装 Plate UI 核心后，您现在可以添加单独的 Plate UI 组件来构建编辑器界面。例如，要添加 FixedToolbar 和 MarkToolbarButton：

bash

npx shadcn@latest add @plate/fixed-toolbar @plate/mark-toolbar-button

在编辑器中导入并使用它们：

tsx

import { Plate } from "platejs/react";
import { FixedToolbar } from "@/components/ui/fixed-toolbar";
import { MarkToolbarButton } from "@/components/ui/mark-toolbar-button";
// ... other imports

export function MyEditor() {
  // ... editor setup
  return (
    <Plate editor={editor}>
      <FixedToolbar>
        <MarkToolbarButton nodeType="bold" tooltip="Bold">B</MarkToolbarButton>
      </FixedToolbar>
    </Plate>
  );
}

探索可用的 UI 组件和插件组件来自定义编辑器节点（如段落、标题等）并构建功能丰富的编辑体验。

基本用法

安装 Plate UI 核心后，请继续阅读适合您框架的指南：

Next.js 指南 - 适用于服务端渲染应用（Next、Remix 等）
React 指南 - 适用于单页应用（Vite、React Router 等）

</Steps>

组件类型

安装 Plate UI 组件时，您会遇到具有一致命名模式的不同类型组件。以下是它们的含义：

功能套件

功能套件是向编辑器添加完整功能的最简单方式。它们捆绑了特定功能所需的所有插件配置、UI 组件（包括节点渲染器和工具栏项）及其底层 npm 依赖项。

bash

# Install the complete AI feature suite, including configuration and UI
npx shadcn@latest add @plate/ai-kit

# Install drag and drop functionality with all its parts
npx shadcn@latest add @plate/dnd-kit

<Callout type="note"> 如果不确定需要哪些单独的组件，请从功能套件开始。它旨在提供开箱即用的功能。您随时可以自定义或移除部分内容。 </Callout>

组件

节点组件

这些组件负责在编辑器中渲染特定类型的内容（元素或叶子）。如果您需要创建自己的组件或自定义现有组件，请参阅插件组件指南。

bash

# Install the component for rendering blockquotes
npx shadcn@latest add @plate/blockquote-node

# Install the component for rendering code text
npx shadcn@latest add @plate/code-node

工具栏组件

工具栏组件为编辑器工具栏添加交互控件，如按钮和下拉菜单。

bash

# Add an alignment dropdown for your toolbar
npx shadcn@latest add @plate/align-toolbar-button

# Add a toolbar button for AI features
npx shadcn@latest add @plate/ai-toolbar-button

# Add a color picker dropdown for your toolbar
npx shadcn@latest add @plate/font-color-toolbar-button

其他组件

最后，Plate UI 还包括更高级的编辑器组件，如覆盖层、菜单、块包装器等。

bash

# Install a menu for AI features
npx shadcn@latest add @plate/ai-menu

# Install a draggable component for reordering blocks
npx shadcn@latest add @plate/block-draggable

这些组件通常包含在各自的功能套件中，但也可以单独安装用于自定义设置。

编辑器模板

这些是预配置的编辑器设置，通常针对特定用例定制或作为全面的起点。您可以探索所有可用的编辑器模板。

bash

# Install an AI-enabled editor template
npx shadcn@latest add @plate/editor-ai

# Install a basic editor template
npx shadcn@latest add @plate/editor-basic

API 路由

这些项目提供某些功能所需的服务端组件或 API 路由处理程序。

bash

# Install AI-related API routes
npx shadcn@latest add @plate/ai-api

# Install file upload API routes (e.g., for UploadThing)
npx shadcn@latest add @plate/media-uploadthing-api

文档

各种 Plate 功能、指南和 API 参考的文档文件也可以添加到您的本地项目中。这对于将特定版本的文档与代码一起保存以及通过 MCP 为 AI 工具提供上下文特别有用。了解更多关于设置本地文档的信息。

bash

# Add AI documentation
npx shadcn@latest add @plate/ai-docs

# Add Plate Plugin documentation
npx shadcn@latest add @plate/plugin-docs

这些项目由 Markdown 文件组成，可以集成到您自己的文档系统中，或供本地搜索和 AI 使用。