在現代前端開發中，富文本編輯器早已不只是輸入文字的工具。它是內容創作、結構表達和用戶交互的核心入口。今天，我們來介紹一款面向未來的編輯器框架——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