react富文本编辑器 react-quill简单使用

实现效果：

安装

npm i react-quill --save

封装组件：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './index.less'
export default function index({ data, onChange }) {
    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"]                       // 链接、图片、视频
                    ],
                }}
                defaultValue={data}
                onChange={onChange}
                theme="snow"
                placeholder="请输入内容"
            />
        </div>
    );
}

index.less 设最小高度

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

使用组件：

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

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

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