基于 Slate.js 的 React 富文本编辑器框架,内置 AI 写作、MCP 兼容与 shadcn/ui 组件体系。
Plate 是一个面向 React 的插件化富文本编辑器框架,以 Slate.js 为底层引擎,通过三层架构(Core Engine → 50+ Headless Plugins → Plate UI)实现高度模块化的编辑体验构建能力。
在编辑核心层面,Plate 覆盖了标题、列表、表格、代码块、数学公式、多列布局、媒体上传等丰富内容类型,支持 Markdown 双向序列化、Slash Command 快捷插入和块级拖拽排序。AI 编辑能力通过 @ai-sdk/react 集成实现流式 Markdown/MDX 写入与上下文感知命令菜单,支持 suggestion/diff 模式的编辑建议追踪,后端仅需暴露标准流式端点即可对接任意模型供应商。协作方面基于 Yjs 提供实时多人编辑、修改追踪与行内评论功能。
Plate UI 层采用 shadcn/ui 风格,通过 npx shadcn@latest add editor-ai 以 CLI 方式分发组件代码至用户项目,确保完全可控。整体以 pnpm monorepo + Turborepo 管理 50+ 独立包,支持 Next.js SSR、RSC 及 Vite 等多种运行环境,适用于 Notion 类编辑器、CMS 编辑核心、AI 写作工具、协作文档平台等场景。
三层架构#
- Core Engine(
@platejs/core):React 插件系统核心,SSR 支持,框架无关 API - Extensible Plugins(
packages/*):50+ 无头插件,覆盖编辑行为、hooks、序列化、规范化等 - Plate UI:基于 shadcn/ui + Radix UI 的可定制 UI 组件层,通过 CLI 分发
Monorepo 包结构#
- 核心:
core、slate、plate、utils - AI:
ai - 基础编辑:
basic-nodes、basic-styles、autoformat、indent、list、tabbable - 内容块:
callout、code-block、date、footnote、layout、math、media、table、toggle、toc - 交互增强:
combobox、comment、cursor、dnd、emoji、find-replace、floating、link、mention、slash-command、suggestion - 格式转换:
csv、diff、docx-io、markdown - 协作:
yjs
安装方式#
推荐通过 shadcn CLI 安装:
npx shadcn@latest add editor-ai
手动安装按框架选择:Next.js、React (Vite)、纯手动(不依赖 shadcn/ui)。服务端支持 RSC 与 Node.js 环境。
待确认信息#
- 商业模型:存在 "Plate Plus" 付费入口,免费与付费功能分界未明确
- MCP 实现细节:文档提及兼容性但具体协议范围需进一步确认
- Slate.js 版本依赖关系未明确标注