富文本初体验之react-quill——2022-07-19

使用步骤

1）安装

npm install react-quill --save

2）引入

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';//富文本样式文件

3）配置（参考）

  const modules = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ header: 1 }, { header: 2 }],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ indent: '-1' }, { indent: '+1' }],
        [{ direction: 'rtl' }],
        [{ size: ['small', false, 'large', 'huge'] }], //字体设置
        [
          {
            color: [],
          },
        ],
        [
          {
            background: [],
          },
        ],
        [{ font: [] }],
        [{ align: [] }],
        ['link', 'image'], // a链接和图片的显示
      ],
    },
  };

4）使用组件

5）实现效果

更多请参考react-quill - npm (npmjs.com)