自定义富文本框里react-quill的字号

最近有个富文本的需求，选了一圈最后决定用react-quill，但是有个问题就是，react-quill里的字号不符合需求，原本的字号是[Small、Normal、Large、Huge]，需要改成['10px', '12px', '14px', '16px', '18px', '24px', '32px', '40px']，标题和正文改成中文['标题一'， '标题二'，'标题三'，'标题四'，'标题五'，'标题六'，'正文'，]

先安装依赖

yarn add react-quill

引入依赖

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

注册修改原来的字号

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

html

<ReactQuill
    placeholder={'请输入'}
    readOnly={true}
    value={editorHtml}
    modules={{
        toolbar: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ size: ['10px', '12px', '14px', '16px', '18px', '24px', '32px', '40px'] }],
            ['bold', 'italic', 'underline', { 'color': [] }, { 'background': [] }, 'strike',],
            [{ 'align': [] }],
            [{ 'indent': '-1' }, { 'indent': '+1' }, { 'list': 'ordered' }, { 'list': 'bullet' },],
            ['link',], //  'image' 图片容易引起接口报错
        ]
    }}
    formats={[
            'header', 'font', 'size',
            'bold', 'italic', 'underline', 'strike', 'blockquote',
            'list', 'bullet', 'indent',
            'link', 'image', 'video', 'color', 'background', 'align'
    ]}
    onChange={onChange}
/>

css改为

.ql-toolbar {
&.ql-snow .ql-picker {
    &.ql-header {

        & .ql-picker-label::before,
        & .ql-picker-item::before {
                content: '正文';
        }

        & .ql-picker-label[data-value="1"]::before,
        & .ql-picker-item[data-value="1"]::before {
                content: '标题一';
        }

        & .ql-picker-label[data-value="2"]::before,
        & .ql-picker-item[data-value="2"]::before {
                content: '标题二';
        }

        & .ql-picker-label[data-value="3"]::before,
        & .ql-picker-item[data-value="3"]::before {
                content: '标题三';
        }

        & .ql-picker-label[data-value="4"]::before,
        & .ql-picker-item[data-value="4"]::before {
                content: '标题四';
        }

        & .ql-picker-label[data-value="5"]::before,
        & .ql-picker-item[data-value="5"]::before {
                content: '标题五';
        }

        & .ql-picker-label[data-value="6"]::before,
        & .ql-picker-item[data-value="6"]::before {
                content: '标题六';
        }
    }

    &.ql-size {
        width: 60px;

        & .ql-picker-label::before,
        .ql-picker-item::before {
                content: '14px';
        }

        & .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="10px"]::before {
                font-size: 10px;
        }

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

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

        & .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;
        }
    }
}