react实现富文本

安装依赖：

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文件。

你可以根据具体需求进一步定制富文本编辑器，设置编辑器的样式、自定义工具栏按钮、限制输入格式等。