在 React 应用中，可以使用第三方组件库来实现富文本的编辑和展示。以下是两种常用的富文本编辑器组件。
- 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> ); }
- 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，你可以根据需要选择不同的样式。
以上是两种常用的富文本编辑器组件，具体使用哪种组件取决于你的实际场景。
