Plate UI 安装

PreviousNext

如何在您的项目中设置 Plate UI。

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

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

CLI 安装（推荐）

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

安装 Plate UI

pnpm dlx shadcn@latest add @plate/plate-ui
pnpm dlx shadcn@latest add @plate/plate-ui

基本用法

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

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

手动安装

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

安装 Plate

pnpm add platejs
pnpm add platejs

配置 CSS 变量

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

app/globals.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);
}
app/globals.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：

pnpm dlx shadcn@latest add @plate/fixed-toolbar @plate/mark-toolbar-button
pnpm dlx shadcn@latest add @plate/fixed-toolbar @plate/mark-toolbar-button

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

components/editor.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>
        {/* ... other toolbar buttons ... */}
      </FixedToolbar>
      {/* ... Editor component ... */}
    </Plate>
  );
}
components/editor.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>
        {/* ... other toolbar buttons ... */}
      </FixedToolbar>
      {/* ... Editor component ... */}
    </Plate>
  );
}

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

基本用法

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

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

组件类型

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

功能套件

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

# 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
# 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

组件

节点组件

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

# 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
# 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

工具栏组件

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

# 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
# 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 还包括更高级的编辑器组件，如覆盖层、菜单、块包装器等。

# 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
# 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

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

编辑器模板

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

# 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
# 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 路由处理程序。

# 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
# 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 工具提供上下文特别有用。了解更多关于 设置本地文档 的信息。

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

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