在现代前端开发中，富文本编辑器早已不只是输入文字的工具。它是内容创作、结构表达和用户交互的核心入口。今天，我们来介绍一款面向未来的编辑器框架——Plate.js。

Plate.js 是什么？

Plate.js 是一个为 React 开发者设计的富文本编辑器框架，构建于 Slate.js 之上，目标是简化复杂编辑器的开发流程。它基于插件化、组合性、无头架构三大理念，提供三个核心模块：

• 核心引擎：具备强大的插件体系，支持服务端渲染（SSR）和框架无关的 API。
• 可扩展插件：一组无头插件，用于处理格式化、序列化、规范化等逻辑。
• Plate UI：基于 shadcn/ui 和 Radix UI 的 UI 组件库，默认美观、支持自定义。

为什么选择 Plate.js？

插件驱动，功能灵活可拓展

Plate 的一切都是插件。你可以根据实际需求组合各类编辑能力，例如：

• Markdown 解析与渲染
• 粗体、高亮、下划线、代码样式
• 引用、分隔线、媒体嵌入
• 表格、任务清单、缩进控制等

此外，开发者还可以轻松创建自定义插件，扩展或替换默认行为，满足业务场景。

原生支持 AI 编辑能力

Plate 设计之初就考虑了 AI 的深度集成。它支持接入各类 AI SDK，为用户提供“AI 驱动的写作体验”。

• 内容生成：自动补全内容、总结文本、翻译和解释复杂语句
• 文本优化：语法检查、风格调整（如正式 <-> 轻松）
• 结构生成：快速插入标题、列表、引用等结构化内容

得益于高度结构化的数据模型，Plate 能作为 AI 编辑器的理想前端。

支持 MCP 协议，助力智能开发工具

Plate 支持 MCP（Model Context Protocol） —— 一个用于帮助 AI 工具理解前端项目上下文的开放协议。

PlateJS 通过两个注册表提供结构化信息：

• registry.json：列出模板、插件配置和 UI 组件信息
• registry-docs.json：包含文档结构、使用方式和迁移指南

AI 工具可以基于 MCP：

• 读取所有组件和插件配置
• 生成带正确导入的代码
• 快速创建完整编辑器实例或添加功能
• 智能更新配置，保持同步

换句话说，MCP 让 AI 能“看懂”你的编辑器项目，实现更高效的智能开发体验。

现代开发体验

Plate 完全基于 React 和 TypeScript 构建，提供流畅的现代开发体验：

• 支持 Vite/Next.js 等框架，集成 SSR
• 类型提示完善，开发者体验优秀
• 可选 Tailwind CSS 或 styled-components 作为样式系统
• 具备灵活的 Hooks API 和组件层

即插即用，亦可按需定制。

快速上手

安装 Plate：

npm install @udecode/plate

构建一个最简单的富文本编辑器：

import {
  Plate,
  createBoldPlugin,
  createItalicPlugin,
  createParagraphPlugin,
} from '@udecode/plate';

const plugins = [
  createParagraphPlugin(),
  createBoldPlugin(),
  createItalicPlugin(),
];

<Plate plugins={plugins} />

从这里开始，你可以继续添加：

• Slash 命令输入
• AI 功能按钮
• 多人协作状态栏
• 自定义渲染逻辑等

Github ：https://github.com/udecode/plate