Name: Plate.js
Rating: 5.0 (16659 reviews)

项目概述

Plate.js 是基于 Slate 和 React 构建的企业级富文本编辑器框架。它深度融合了现代流行的 shadcn/ui 组件规范与 Tailwind CSS 样式生态，内置超过 50 款工业级插件（包括 AI 写作助手、划词评论、拖拽手柄、类 Notion 斜杠指令、多维表格与数学公式）。

核心特性

🧩 50+ 开箱即用插件生态：涵盖复杂表格、高亮提示块 (Callouts)、代码沙箱、@提及、图片拖拽上传与 Markdown 快捷输入。
🤖 原生 AI 写作助手深度整合：原生支持行内大模型文本生成、自动补全、多语言翻译与语气改写。
🎨 shadcn/ui 原生视觉规范：采用 Tailwind CSS 和 Radix UI 原子化封装，与现有设计系统无缝融合且极易二次修改。
📦 CLI 命令行即粘即用：支持通过 CLI 工具直接将编辑器组件代码注入本地项目，享受 100% 的代码掌控权。

快速上手与示例代码

# 一键初始化 Plate 编辑器组件
npx @udecode/plate-ui@latest init

import React from 'react';
import { createPlateEditor, Plate, PlateContent } from '@udecode/plate/react';
import { EditorContainer } from '@/components/plate-ui/editor';

export function RichEditor() {
  const editor = createPlateEditor();

  return (
    <Plate editor={editor}>
      <EditorContainer className="rounded-xl border border-neutral-200 dark:border-neutral-800 p-4 min-h-[350px]">
        <PlateContent placeholder="输入 '/' 唤起快捷指令，或使用 AI 辅助写作..." />
      </EditorContainer>
    </Plate>
  );
}

技术选型建议与适用场景

类 Notion / 飞书块级文档应用：需要在 React 生态中快速构建现代块级编辑器、协同知识库与博客内容发布后台。
Tailwind 与 shadcn 生态深度用户：告别传统富文本编辑器样式难以深度定制的痛点，直接享受原子化组件的灵活与优雅。

Plate.js

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

Ambient CSS

23rd

Duolingo UI (ShadLingo)