安装依赖：
npm install react-quill
导入依赖：
import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; // 导入样式文件
创建富文本编辑器组件：
import React, { useState } from 'react'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; function RichTextEditor() { const [content, setContent] = useState(''); const handleContentChange = (value) => { setContent(value); }; return ( <div> <ReactQuill value={content} onChange={handleContentChange} /> </div> ); } export default RichTextEditor;
在应用中使用富文本编辑器组件：
import React from 'react'; import RichTextEditor from './RichTextEditor'; function App() { return ( <div> <RichTextEditor /> {/* 其他组件 */} {/* ... */} </div> ); } export default App;
上述示例中，我们使用了react-quill库来创建一个富文本编辑器组件（RichTextEditor）。通过useState钩子来管理富文本内容（content）的状态。在handleContentChange函数中，我们根据用户输入的变化来更新内容状态。
通过<ReactQuill>组件，我们将富文本编辑器渲染到页面上，并将内容状态绑定到value属性上，将handleContentChange函数绑定到onChange事件上。
同时，为了正确显示富文本编辑器的样式，我们引入了相应的CSS文件。
你可以根据具体需求进一步定制富文本编辑器，设置编辑器的样式、自定义工具栏按钮、限制输入格式等。
