react富文本编辑框

React富文本编辑框可以使用第三方库来实现，其中比较常用的是`react-quill`和`draft-js`。

1. 使用`react-quill`:
首先，安装`react-quill`库：

   npm install react-quill

然后，导入必要的组件并创建一个富文本编辑框组件：

   import ReactQuill from 'react-quill';
   import 'react-quill/dist/quill.snow.css'; // 导入样式

   const RichTextEditor = () => {
     return (
       <ReactQuill theme="snow" />
     );
   };

   export default RichTextEditor;

最后，在你的页面中使用这个组件：

   import React from 'react';
   import RichTextEditor from './RichTextEditor';

   const App = () => {
     return (
       <div>
         <h1>React富文本编辑框</h1>
         <RichTextEditor />
       </div>
     );
   };

   export default App;

2. 使用`draft-js`:
首先，安装`draft-js`库：

   npm install draft-js

然后，导入必要的组件并创建一个富文本编辑框组件：

   import { Editor, EditorState } from 'draft-js';
   import 'draft-js/dist/Draft.css'; // 导入样式

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

     const handleChange = (newEditorState) => {
       setEditorState(newEditorState);
     };

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

   export default RichTextEditor;

最后，在你的页面中使用这个组件：

   import React from 'react';
   import RichTextEditor from './RichTextEditor';

   const App = () => {
     return (
       <div>
         <h1>React富文本编辑框</h1>
         <RichTextEditor />
       </div>
     );
   };

   export default App;

以上是两种常见的React富文本编辑框的实现方法，你可以根据自己的需求选择适合的库和组件来使用。