当前位置：首页 > news >正文

React 轻量级富文本编辑器推荐（中文版）

news 来源：原创 2025/5/16 8:02:33

以下是几款适合集成到 React 项目中的轻量级富文本编辑器，特别针对中文用户优化推荐：

超轻量级选择（小于100KB）

1. react-simplemde-editor（Markdown编辑器）

特点：专为 Markdown 设计，适合技术写作
中文支持：良好

安装：

npm install react-simplemde-easymde

import React from 'react';
import SimpleMDE from 'react-simplemde-editor';
import 'easymde/dist/easymde.min.css';export default function MarkdownEditor() {const [value, setValue] = React.useState('## 开始编辑...');return <SimpleMDE value={value} onChange={setValue} />;
}

主流轻量级选择（100-300KB）

2. react-quill（推荐首选）

特点：功能齐全，中文文档丰富
中文支持：优秀

安装：

npm install react-quill quill

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'quill/dist/quill.snow.css';export default function ChineseEditor() {const [content, setContent] = useState('<p>请输入中文内容...</p>');const modules = {toolbar: [['bold', 'italic', 'underline'],[{'list': 'ordered'}, {'list': 'bullet'}],['link'],['clean']]};return (<ReactQuilltheme="snow"value={content}onChange={setContent}modules={modules}placeholder="请用中文输入..."/>);
}

3. wangeditor-for-react（中文开发者专供）

特点：由国内团队开发，专为中文优化

安装：

npm install wangeditor-for-react

import React from 'react';
import WangEditor from 'wangeditor-for-react';export default function WangEditorDemo() {return (<WangEditordefaultValue="<p>中文内容编辑</p>"onChange={(html) => console.log(html)}config={{menus: ['bold', 'italic', 'head', 'link'],lang: 'zh-CN'}}/>);
}

与 Ant Design 表单集成示例：

import { Form, Button } from 'antd';
import ReactQuill from 'react-quill';
import 'quill/dist/quill.snow.css';export default function EditorForm() {const [form] = Form.useForm();const onFinish = (values) => {console.log('提交内容:', values.content);};return (<Form form={form} onFinish={onFinish}><Form.Itemname="content"label="文章内容"rules={[{ required: true, message: '请输入内容' }]}><ReactQuilltheme="snow"placeholder="请用中文输入您的内容..."style={{ height: 300 }}/></Form.Item><Form.Item><Button type="primary" htmlType="submit">提交</Button></Form.Item></Form>);
}