react-rich-text-kit

v0.1.4

Published

12 days ago

A reusable Chinese-localized rich text editor package based on Tiptap UI simple-editor.

0High
0Medium
0Low

hxin0629

tiptap rich-text-editor react editor wysiwyg

react-rich-text-kit

项目简介

react-rich-text-kit 是一个基于 Tiptap 和 Tiptap UI Simple Editor 抽取的 React 富文本编辑器组件。它内置中文工具栏文案、链接弹窗、图片上传入口和移动端工具栏适配，适合在后台管理、内容发布、表单编辑等场景中快速接入富文本能力。

组件会在内容变化时返回常用数据格式，包括 html、json 和 text。包内只导出编辑器组件、中文文案和相关 TypeScript 类型，样式通过独立的 style.css 子路径引入。

使用方式

安装组件包：

pnpm add react-rich-text-kit

在页面或应用入口中引入组件和样式：

import { RichTextEditor } from 'react-rich-text-kit'
import 'react-rich-text-kit/style.css'

export function EditorDemo() {
  return (
    <RichTextEditor
      placeholder="请输入内容"
      onChange={({ html, json, text }) => {
        console.log(html, json, text)
      }}
    />
  )
}

需要受控内容时，使用 value 和 onChange。value 支持 HTML 字符串和 Tiptap JSONContent：

import { useState } from 'react'
import { RichTextEditor } from 'react-rich-text-kit'
import type { JSONContent } from 'react-rich-text-kit'
import 'react-rich-text-kit/style.css'

export function ControlledEditor() {
  const [content, setContent] = useState<JSONContent>({
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [{ type: 'text', text: '这是一段初始内容。' }],
      },
    ],
  })

  return (
    <RichTextEditor
      value={content}
      onChange={({ json }) => {
        setContent(json)
      }}
    />
  )
}

只需要初始化一次内容时，使用 defaultValue：

<RichTextEditor
  defaultValue="<p>欢迎使用富文本编辑器。</p>"
  onChange={({ html }) => {
    console.log(html)
  }}
/>

工具栏的图片按钮支持两种方式：上传图片和输入图片 URL。输入图片 URL 不需要额外配置；传入 uploadImage 后，会启用"上传图片"选项，上传函数需要返回图片 URL。可通过 onUploadError 捕获上传错误：

<RichTextEditor
  maxImageSize={5 * 1024 * 1024}
  imageUploadLimit={3}
  uploadImage={async (file, onProgress, abortSignal) => {
    const formData = new FormData()
    formData.append('file', file)

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      signal: abortSignal,
    })

    if (!response.ok) {
      throw new Error('图片上传失败')
    }

    onProgress?.({ progress: 100 })

    const result = await response.json()
    return result.url
  }}
  onUploadError={(error) => {
    console.error('上传失败:', error.message)
  }}
/>

可以使用 hiddenTools 隐藏工具栏按钮，使用 labels 覆盖默认中文文案：

<RichTextEditor
  hiddenTools={['codeBlock', 'taskList', 'imageUpload']}
  labels={{
    placeholder: '写点什么...',
    linkPlaceholder: '输入链接地址...',
    imageUpload: '添加图片',
    imageUploadFromFile: '上传图片',
    imageUploadFromUrl: '图片 URL',
  }}
/>

可以使用 editable、minHeight、maxHeight、className 和 contentClassName 控制编辑器状态与样式：

<RichTextEditor
  editable={false}
  minHeight={240}
  maxHeight="70vh"
  className="my-editor"
  contentClassName="my-editor-content"
/>

暗色模式

编辑器支持暗色模式。在编辑器的祖先元素（如 <html> 或 <body>）上添加 .dark class 即可切换：

<html class="dark">
  <!-- 编辑器会自动使用暗色主题 -->
</html>

也可以直接在编辑器容器上使用：

<RichTextEditor className="dark" />

在 Next.js App Router 中，请从 client component 中使用：

'use client'

import { RichTextEditor } from 'react-rich-text-kit'
import 'react-rich-text-kit/style.css'

export default function PageEditor() {
  return <RichTextEditor />
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-rich-text-kit

项目简介

使用方式

暗色模式