实现效果：

pg.png

安装

npm i react-quill --save

封装组件：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './index.less'
import {useEffect, useState} from "react";
export default function index({ defaultValue, onChange }) {
    const [editorValue, setEditorValue] = useState(defaultValue);

    const handleChange = (content) => {
        setEditorValue(content);
        onChange(content);
    };

    useEffect(() => {
        handleChange(defaultValue)
    }, [defaultValue]);
    return (
        <div>
            <ReactQuill
                bounds={document.body}
                modules={{
                    toolbar: [
                        ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
                        ["blockquote", "code-block"],                    // 引用  代码块
                        [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
                        [{ indent: "-1" }, { indent: "+1" }],            // 缩进
                        [{ size: ["small", false, "large", "huge"] }],   // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
                        [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
                        [{ align: [] }],                                 // 对齐方式
                        ["clean"],                                       // 清除文本格式
                        ["link", "image", "video"]                       // 链接、图片、视频
                    ],
                }}
                value={editorValue}
                onChange={handleChange}
                // style={{border: '1px solid #ff4d4f' }}
                theme="snow"
                placeholder="请输入内容"
            />
        </div>
    );
}

index.less 设最小高度

.ql-editor{
  min-height: 180px;
}

使用组件：

1、data 是默认值，可以用于数据回填时使用。
2、text 编辑器内数据的保存，可用于传接口时使用。

  const [text, setText] = useState("");

  const getEditor = (data) => {
    return (
      <Editor
        defaultValue={data || ""}
        onChange={(value) => {
          setText(value);
        }}
      />
    );
  };