使用指南：React RTE - 富文本编辑器实战手册

使用指南：React RTE - 富文本编辑器实战手册

项目地址:https://gitcode.com/gh_mirrors/re/react-rte

---

项目介绍

React RTE 是一个基于 Draft.js 的富文本编辑器组件，专为简化在 React 应用中集成富文本编辑而设计。它提供了一个直观易用的界面和定制化的工具栏，让用户能够轻松地创建和编辑带样式的文本内容，无需深入理解复杂的底层实现。

特性亮点：

• 简易集成：轻松添加到任何 React 项目中。
• 自定义工具栏：可根据需求调整编辑功能按钮。
• HTML 转换：方便地将编辑的内容转换成 HTML 格式。
• 响应式设计：适应各种屏幕尺寸。

项目快速启动

首先，确保你的开发环境已安装 Node.js 和 npm。

安装

通过 npm 或 yarn 将 React RTE 添加到你的项目中：

npm install --save react-rte
# 或者，如果你使用的是 Yarn
yarn add react-rte

示例代码

接下来，在你的 React 组件中引入并使用 React RTE：

import React from 'react';
import RichTextEditor from 'react-rte';

class RichTextExample extends React.Component {
  state = {
    value: RichTextEditor.createEmptyValue(),
  };

  onChange = (value) => {
    this.setState({ value });
    // 若有外部处理函数
    // this.props.onChange?.(value.toString('html'));
  };

  render() {
    return (
      <div>
        <RichTextEditor
          value={this.state.value}
          onChange={this.onChange}
          toolbarConfig={{
            display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'HISTORY_BUTTONS'],
            INLINE_STYLE_BUTTONS: [
              { label: '粗体', style: 'BOLD' },
              { label: '斜体', style: 'ITALIC' },
              { label: '下划线', style: 'UNDERLINE' },
            ],
            BLOCK_TYPE_DROPDOWN: [
              { label: '正文', style: 'unstyled' },
              { label: '大标题', style: 'header-one' },
              { label: '小标题', style: 'header-two' },
            ],
          }}
        />
      </div>
    );
  }
}

export default RichTextExample;

这段代码展示了如何初始化编辑器状态并处理值的变化，允许用户编辑文本，并可以进一步处理这些更改（例如存储或提交）。

应用案例和最佳实践

在实际应用中，结合表单库如 Formik 进行表单验证是个常见场景。要集成 Formik，你可以将编辑器的值与 Formik 的字段绑定，并在提交时处理 HTML 输出。

Formik 集成示例

import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { ... } from './RichTextExample'; // 引入之前定义的 RichTextEditor 组件

const schema = Yup.object().shape({
  content: Yup.string().required('内容是必填项'),
});

function MyForm() {
  return (
    <Formik initialValues={{ content: '' }} validationSchema={schema} onSubmit={(values) => console.log(values)}>
      {({ values, handleChange }) => (
        <Form>
          {/* 将编辑器的 onChange 连接到 Formik 的 handleChange */}
          <RichTextExample value={values.content} onChange={(richTextValue) => handleChange('content')(richTextValue.toString('html'))} />
          {/* 其他表单项及提交逻辑 */}
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;

典型生态项目

虽然 React RTE 本身是一个独立的库，但其易于与现有的前端生态融合，特别是在搭配表单库（如 Formik, Redux-Form）、路由系统（React Router）或者数据管理解决方案（Redux, MobX）时。在构建复杂的应用界面时，比如博客编辑器、CMS后台等，React RTE 结合其他前端技术栈可以提供完整的富文本编辑体验。

由于React RTE直接聚焦于富文本编辑的需求，与之配套的生态项目通常围绕前端架构的最佳实践展开，而非特定于React RTE的扩展。这意味着开发者可以自由选择适合自己的状态管理、路由或其他第三方库来完善应用功能。

---

本指南提供了从安装、基本使用到进阶整合Formik的全方位指导，帮助您快速上手React RTE，打造强大的富文本编辑功能。

react-rte Pure React rich text WYSIWYG editor based on draft-js. 项目地址: https://gitcode.com/gh_mirrors/re/react-rte