react18中使用react-quill富文本编辑器

第一步：安装

npm i react-quill

第二步：引入

import ReactQuill from 'react-quill'
import 'quill/dist/quill.snow.css'

第三步：定义react-quill的配置对象，我只做了简单配置，详细配置可以去照着文档配

const quillOption = {
    toolbar: {
      container: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ align: [] }],
        [{ color: [] }, { background: [] }],
        ['link', 'image'],
        ['clean']
      ]
    }
  }

第四步：结构，还有value属性和onChange方法

<ReactQuill
    theme='snow'
    value={value}
    onChange={handleChange}
    modules={quillOption}
    className='ql-editor'
 />