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

以下是几款适合集成到 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 (
      <ReactQuill
        theme="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 (
      <WangEditor
        defaultValue="<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.Item
          name="content"
          label="文章内容"
          rules={[{ required: true, message: '请输入内容' }]}
        >
          <ReactQuill
            theme="snow"
            placeholder="请用中文输入您的内容..."
            style={{ height: 300 }}
          />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  }

  选择建议

• 需要完整中文支持：

  • 首选 wangeditor-for-react（完全中文化）

  • 次选 react-quill（国际化支持好）

• 技术文档写作：

  • 选择 react-simplemde-editor（Markdown专用）

• 项目体积敏感：

  • react-quill（200KB左右）

  • wangeditor-for-react（约150KB）

• 企业级应用：

  • 推荐使用 react-quill + 自定义中文语言包