面向未来的富文本编辑器，支持 AI、MCP，开源免费!
在现代前端开发中，富文本编辑器早已不只是输入文字的工具。它是内容创作、结构表达和用户交互的核心入口。今天，我们来介绍一款面向未来的编辑器框架——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
