reactjs-tiptap-editor：基于 Tiptap 和 Shadcn UI 的现代化 React 富文本编辑器

reactjs-tiptap-editor 是一个基于 Tiptap 和 Shadcn UI 构建的现代化 React 富文本编辑器组件库。它提供了开箱即用的 WYSIWYG 编辑体验，支持丰富的扩展功能和自定义主题，目前已获得 668+ stars 和 151 个 fork。

项目简介

reactjs-tiptap-editor 是一个开源的 React 富文本编辑器解决方案，由 Hung Hoang 开发和维护。该项目基于强大的 Tiptap 编辑器框架，结合现代化的 Shadcn UI 组件库，为开发者提供了一套美观、易用且高度可定制的富文本编辑组件。

截至目前，该项目在 GitHub 上已获得 668 stars，被 178 个项目使用，拥有 29 位贡献者。

核心特性

现代化 UI：基于 Shadcn UI 设计系统，界面美观且一致
丰富的扩展支持：内置 40+ 种编辑器扩展，涵盖常用编辑功能
TypeScript 支持：完整的类型定义，提供优秀的开发体验
自定义主题：支持深色/浅色模式，可自定义编辑器主题
国际化支持：内置多语言支持，易于扩展新语言
轻量级：优化的包体积，支持 Tree Shaking
React 生态：完美适配 React 18，支持服务端渲染

技术栈

React 18 - 核心 UI 框架
Tiptap - 基于 ProseMirror 的现代化编辑器框架
TypeScript - 类型安全的开发语言（占比 96.8%）
Tailwind CSS - 原子化 CSS 框架
Shadcn UI - 现代化的 React 组件库

安装指南

前置要求

Node.js >= 18
React >= 18

安装步骤

bash

# 使用 npm
npm install reactjs-tiptap-editor@latest

# 使用 pnpm
pnpm add reactjs-tiptap-editor@latest

# 使用 yarn
yarn add reactjs-tiptap-editor@latest

快速开始

基础用法

tsx

import { RichTextProvider } from 'reactjs-tiptap-editor'
import { EditorContent, useEditor } from "@tiptap/react";

// 基础扩展
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// 导入样式
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // 基础扩展
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/\' for commands',
  })
  // ... 其他扩展
];

const App = () => {
  const editor = useEditor({
    textDirection: 'auto',
    extensions,
  });

  return (
    <RichTextProvider editor={editor}>
      <EditorContent editor={editor} />
    </RichTextProvider>
  );
};

支持的扩展功能

reactjs-tiptap-editor 提供了丰富的内置扩展：

基础格式

Bold - 粗体
Italic - 斜体
Strike - 删除线
Underline - 下划线
Code - 行内代码

段落与标题

Heading - 标题（H1-H6）
Paragraph - 段落
Blockquote - 引用块
HorizontalRule - 分隔线

列表

BulletList - 无序列表
OrderedList - 有序列表
TaskList - 任务列表
Indent - 缩进控制

媒体与嵌入

Image - 图片上传与编辑
ImageGif - GIF 图片支持
Video - 视频嵌入
Iframe - iframe 嵌入
Attachment - 文件附件

表格

Table - 完整表格支持
表格合并、拆分、添加行列

高级功能

CodeBlock - 代码块（支持语法高亮）
CodeView - 源代码查看
Katex - LaTeX 数学公式
Mermaid - Mermaid 图表
Excalidraw - Excalidraw 手绘图
Emoji - 表情符号选择器
Mention - @提及功能
Link - 链接管理
Color - 文字颜色与背景色
Highlight - 高亮文本
FontFamily - 字体选择
FontSize - 字体大小
LineHeight - 行高调整
TextAlign - 文本对齐
TextDirection - 文本方向（RTL/LTR）
SearchAndReplace - 查找替换
SlashCommand - 斜杠命令
Clear - 清除格式
History - 撤销/重做
MoreMark - 更多标记
Column - 多栏布局
Callout - 标注块
Drawer - 抽屉组件
Twitter - Twitter 卡片嵌入
ExportPdf - 导出 PDF
ExportWord - 导出 Word
ImportWord - 导入 Word

使用示例

场景 1：带工具栏的编辑器

tsx

import { useEditor, EditorContent } from '@tiptap/react'
import { RichTextProvider, Toolbar } from 'reactjs-tiptap-editor'
import { extensions } from './extensions'
import 'reactjs-tiptap-editor/style.css'

function EditorWithToolbar() {
  const editor = useEditor({
    extensions,
    content: '<p>Hello World!</p>',
  })

  return (
    <RichTextProvider editor={editor}>
      <Toolbar />
      <EditorContent editor={editor} />
    </RichTextProvider>
  )
}

场景 2：气泡菜单编辑器

tsx

import { useEditor, EditorContent } from '@tiptap/react'
import { RichTextProvider, BubbleMenu } from 'reactjs-tiptap-editor'
import { extensions } from './extensions'

function EditorWithBubbleMenu() {
  const editor = useEditor({
    extensions,
    content: '<p>选中文字查看气泡菜单</p>',
  })

  return (
    <RichTextProvider editor={editor}>
      <EditorContent editor={editor} />
      <BubbleMenu />
    </RichTextProvider>
  )
}

场景 3：自定义主题

tsx

import { RichTextProvider } from 'reactjs-tiptap-editor'

function CustomThemeEditor() {
  return (
    <RichTextProvider
      editor={editor}
      dark={true}  // 启用深色模式
    >
      <EditorContent editor={editor} />
    </RichTextProvider>
  )
}

Props 配置

RichTextProvider Props

属性	类型	必填	说明
editor	Editor \| null	是	Tiptap 编辑器实例
dark	boolean	否	是否启用深色模式

本地开发