react-quill编辑器设置自定义字体大小

1. 设置字体大小

编辑器有一套默认配置字体大小的配置，但是只有默认的字体大小可选：

const modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['link'],
      [{ color: [] }, { background: [] }], 
      [{ size: ['small', false, 'large', 'huge'] }], // 官方提供的字体大小配置
      ['clean'],
    ],
  }

效果如下：

官方默认的字体配置不满足正常需求，我们想要自定义字体大小的配置，需要这样做：

（1）注册字号

这里注意import的路径为attributors/style/size，其他文章也有说import路径为fomats/size，这样做看起来功能上没啥区别，但是路径为fomats/size拿到的html上更改字体的标签是带class属性的，显然不符合要求，我需要的是行内样式。通过路径为attributors/style/size拿到的html就是行内样式。

import ReactQuill, { Quill } from 'react-quill'
import 'react-quill/dist/quill.bubble.css'

const SizeStyle = Quill.import('attributors/style/size')
SizeStyle.whitelist = ['10px','12px','14px', '16px', '18px', '24px', '32px', '40px']
Quill.register(SizeStyle, true)

(2)修改toolbar的size为对应字体大小

第一项为false表示默认情况下，不指定文字大小。toolbar上默认展示为normal，可以自定义文案，在样式文件.ql-picker-label::before,.ql-picker-item::before配置其content即可。

    const modules = {
        toolbar: [
          ...
          [{ size: [false, '10px','12px','14px', '16px', '18px', '24px', '32px', '40px'],
        ],
      }

(3)样式文件加入

    .editor {
      .ql-toolbar {
        &.ql-snow .ql-picker {
          &.ql-size {
            width: 60px;

            & .ql-picker-label::before,
            .ql-picker-item::before {
              content: '默认';
            }

            & .ql-picker-label[data-value='10px']::before,
            & .ql-picker-item[data-value='10px']::before {
              content: '10px';
            }

            & .ql-picker-label[data-value='12px']::before,
            & .ql-picker-item[data-value='12px']::before {
              content: '12px';
            }

            & .ql-picker-label[data-value='14px']::before,
            & .ql-picker-item[data-value='14px']::before {
              content: '14px';
            }

            & .ql-picker-label[data-value='16px']::before,
            & .ql-picker-item[data-value='16px']::before {
              content: '16px';
            }

            & .ql-picker-label[data-value='18px']::before,
            & .ql-picker-item[data-value='18px']::before {
              content: '18px';
            }

            & .ql-picker-label[data-value='24px']::before,
            & .ql-picker-item[data-value='24px']::before {
              content: '24px';
            }

            & .ql-picker-label[data-value='32px']::before,
            & .ql-picker-item[data-value='32px']::before {
              content: '32px';
            }

            & .ql-picker-label[data-value='40px']::before,
            & .ql-picker-item[data-value='40px']::before {
              content: '40px';
            }

            & .ql-picker-item[data-value='13px']::before {
              font-size: 13px;
            }

            & .ql-picker-item[data-value='16px']::before {
              font-size: 16px;
            }

            & .ql-picker-item[data-value='18px']::before {
              font-size: 18px;
            }

            & .ql-picker-item[data-value='24px']::before {
              font-size: 24px;
            }

            & .ql-picker-item[data-value='32px']::before {
              font-size: 32px;
            }

            & .ql-picker-item[data-value='40px']::before {
              font-size: 40px;
            }
          }
        }
      }

      .ql-container {
        .ql-editor {
          & .ql-size-10px {
            font-size: 10px;
          }

          & .ql-size-12px {
            font-size: 12px;
          }

          & .ql-size-14px {
            font-size: 14px;
          }

          & .ql-size-16px {
            font-size: 16px;
          }

          & .ql-size-18px {
            font-size: 18px;
          }

          & .ql-size-24px {
            font-size: 24px;
          }

          & .ql-size-32px {
            font-size: 32px;
          }

          & .ql-size-40px {
            font-size: 40px;
          }
        }
      }
    }

做完以上，就可以在编辑器自定义字体大小了