Plate：一款基于 React 和 Slate.js 的现代化富文本编辑器框架

开篇唠嗑

各位老铁们，今天我们来摆一摆一个超级好用的 React 富文本编辑器框架——Plate！

说实话，做富文本编辑器的都知道，这玩意儿坑多得很。要么是功能太弱鸡，要么是定制太麻烦，用第三方组件吧，又怕被人家卡脖子。还好有 Plate 这个宝藏项目，让咱们写编辑器跟玩积木似的，简单又灵活。

产品介绍

Plate 是啥子呢？它是一个基于 Slate.js 构建的 React 富文本编辑器组件库。简单说，它给 Slate.js 这套底层引擎穿上了"衣服"，提供了开箱即用的 UI 组件和插件系统。

Plate 的口号是 “The next generation of rich text editors”，翻译成人话就是"下一代富文本编辑器"。它的设计理念是插件化、可扩展、类型安全，让开发者可以像搭积木一样组装出想要的编辑器功能。

核心特性

插件化架构：所有功能都是插件，想用哪个装哪个，不想要就拔掉
TypeScript 原生支持：类型提示杠杠的，IDE 里敲代码爽得很
组件化设计：工具栏、快捷菜单、拖拽排序…全是现成的组件
中文支持友好：对中文输入法的处理做得还不错
SSR 兼容：Next.js 这些框架里也能用

Plate 能做啥子？

基本上常见的富文本功能它都包圆了：

加粗、斜体、下划线这些基础格式
标题层级、段落样式
列表（有序、无序、任务列表）
引用块、代码块
链接插入和编辑
图片上传和预览
表格编辑
拖拽排序
快捷键支持
Markdown 快捷输入
…（太多了，写不下）

产品横向对比

市面上富文本编辑器那么多，Plate 跟其他选手比有啥子优势呢？下面这个表格帮你搞清楚：

特性	Plate	Draft.js	Slate.js (原生)	Quill	Tiptap
底层框架	React + Slate	React	自主研发	JavaScript	ProseMirror
插件系统	原生插件化	有限	需自行封装	有限	原生插件化
TypeScript	优秀支持	一般	一般	无	良好支持
学习曲线	中等	较低	较高	低	中等
定制灵活性	极高	中等	极高	低	高
组件丰富度	丰富	一般	需自行开发	一般	较丰富
中文支持	良好	一般	良好	一般	良好

选哪个合适？

如果你用的是 React，又想要高度定制，Plate 和 Tiptap 都是不错的选择
如果你是 Vue 用户，Tiptap 可能更对口
如果项目工期紧、需求简单，Quill 或 Draft.js 够用了
如果你是技术控，喜欢底层控制，直接用 Slate.js 原生更自由
如果想要 Typescript 支持好、插件生态丰富，Plate 值得拥有

总的来说，Plate 在 React 生态里算是集大成者，把 Slate.js 的强大和 React 的便利性完美结合了。

安装和部署

环境要求

React 18+
TypeScript 4.5+
Slate.js 0.50+

安装步骤

首先安装核心包：

npminstall@udecode/plate# 或者yarnadd@udecode/plate# 或者pnpmadd@udecode/plate

如果你需要特定的插件，还得单独装：

# 基础功能npminstall@udecode/plate-basic-marksnpminstall@udecode/plate-block-quotenpminstall@udecode/plate-headingsnpminstall@udecode/plate-line-heightnpminstall@udecode/plate-link# 列表功能npminstall@udecode/plate-listnpminstall@udecode/plate-todo# 高级功能npminstall@udecode/plate-code-blocknpminstall@udecode/plate-tablenpminstall@udecode/plate-imagenpminstall@udecode/plate-find-replace# UI 组件npminstall@udecode/plate-ui

基础使用示例

整一个最简单的编辑器试试水：

import React from 'react'; import { createPlateEditor, Plate } from '@udecode/plate'; import { basicPlugins } from './basicPlugins'; import { basicNodes } from './basicNodes'; import { Toolbar } from './Toolbar'; import { Editable } from './Editable'; const editor = createPlateEditor({ plugins: [...basicPlugins, ...basicNodes], }); export default function MyEditor() { return ( <Plate editor={editor}> <Toolbar /> <Editable /> </Plate> ); }

带工具栏的完整示例

import React from 'react'; import { createPlateEditor, Plate, usePlateEditor } from '@udecode/plate'; import { createBasicPlugins } from '@udecode/plate-basic'; import { createHeadingPlugin } from '@udecode/plate-headings'; import { createListPlugin } from '@udecode/plate-list'; import { ToolbarButtons } from './ToolbarButtons'; import { ValueInspector } from './ValueInspector'; const plugins = [ ...createBasicPlugins(), createHeadingPlugin(), createListPlugin(), ]; const editor = createPlateEditor({ plugins, overrideByKey: { // 自定义配置 }, }); export default function RichTextEditor() { return ( <div style={{ padding: '20px' }}> <Plate editor={editor}> <ToolbarButtons /> <div style={{ border: '1px solid #ddd', borderRadius: '4px', minHeight: '200px', padding: '12px', }} > <Editable placeholder="想写啥子就写啥子..." /> </div> </Plate> <ValueInspector /> </div> ); }

工具栏按钮组件

import React from 'react'; import { useHotkeys } from '@udecode/plate'; import { ToolbarBold, ToolbarItalic, ToolbarUnderline } from '@udecode/plate-ui'; import { useActive, useSoftBreak } from '@udecode/plate'; export function ToolbarButtons() { useHotkeys('mod+b', (e) => { e.preventDefault(); // 调用加粗命令 }); return ( <div style={{ borderBottom: '1px solid #ddd', padding: '8px', display: 'flex', gap: '8px' }}> <ToolbarBold icon="B" /> <ToolbarItalic icon="I" /> <ToolbarUnderline icon="U" /> </div> ); }

进阶：自定义插件

Plate 的插件系统相当灵活，你可以自己整活：

import { createPlugin } from '@udecode/plate'; export const EmojiPlugin = createPlugin({ key: 'emoji', inject: { aboveComponents: { // 在段落上方注入 emoji 选择器 }, }, handlers: { onKeyDown: (editor) => (event) => { if (event.key === ':') { // 触发 emoji 补全 } }, }, });