react富文本

在 React 应用中，可以使用第三方组件库来实现富文本的编辑和展示。以下是两种常用的富文本编辑器组件。

1. Draft.js

Draft.js 是由 Facebook 开发的富文本编辑器，可用于 React 应用中。它内置了很多功能，例如撤销/重做、媒体管理等。

以下是一个简单的示例：

import React, { useState } from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";

function MyEditor() {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  function onEditorStateChange(editorState) {
    setEditorState(editorState);
  }

  return (
    <div>
      <Editor editorState={editorState} onChange={onEditorStateChange} />
    </div>
  );
}

1. React-Quill

React-Quill 是基于 Quill.js 开发的组件，提供了一个简洁易用的富文本编辑器。

以下是一个简单的示例：

import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function MyEditor() {
  const [content, setContent] = useState("");

  function onContentChange(value) {
    setContent(value);
  }

  return (
    <div>
      <ReactQuill value={content} onChange={onContentChange} />
    </div>
  );
}

使用 React-Quill 组件需要引入 Quill 样式文件，示例中我引用了 quill.snow.css，你可以根据需要选择不同的样式。

以上是两种常用的富文本编辑器组件，具体使用哪种组件取决于你的实际场景。