Как добавить нестандартные размеры шрифтов в React-quill

Question

Я хочу добавить нестандартный размер и соответствующие имена в раскрывающийся список Размер шрифта, предоставленный в библиотеке act-quill.

Я смог сделать это с помощью Quilljs, но после импорта Quill из "act-quill "не смог выяснить, куда добавить зарегистрированный SizeStyle.

Я сделал это с болью quilljs в версии jquery, и она работает. Но когда я пытаюсь сделать то же самое в React-quill, это не работает.

import ReactQuill, { Quill } from 'react-quill';

let SizeStyle = Quill.import('attributors/style/size');
SizeStyle.whitelist = ["10px", "15px", "18px", "20px", "32px", "54px"]
Quill.register(SizeStyle, true);

В методе рендеринга:

Что делать?

Ожидаемое:

Пользовательский выпадающий с выбором для размеров, упомянутых выше

Answer 1

Был в состоянии понять это. При использовании пользовательских шрифтов или панели инструментов параметры панели инструментов не должны передаваться вместе с форматами и отображаемыми объектами. Вместо этого нам нужно добавить HTML с параметрами, и идентификатор должен быть передан в modules.toolbar.container.

Код:

const Font = ReactQuill.Quill.import('formats/font');
Font.whitelist = ['large', 'medium', "small", "regular", "bold", "pullquote"] ;
ReactQuill.Quill.register(Font, true);
const CustomToolbar = () => (
  <div id="custom-toolbar">
    <Dropdown
      id="ql-font"
    >
      <Option value="large">Large heading</Option>
      <Option value="medium">Medium heading</Option>
      <Option value="small">Small heading</Option>
      <Option value="regular">Regular</Option>
      <Option value="bold">Bold</Option>
      <Option value="pullquote">Pullquote</Option>
    </Dropdown>
    <button className="ql-list" value="ordered"></button>
    <button className="ql-list" value="bullet"></button>
    <button className="ql-link"></button>
  </div>
)

let module = { toolbar: { container: "#custom-toolbar" } }
<div className="text-editor">
  <CustomToolbar />
  <ReactQuill
    ref={(el) => { this.delta = el } }
    onChange={this.handleChange}
    placeholder={this.props.placeholder}
    modules={Editor.modules}
  />
</div>

Сделали это для шрифтов, таким же образом удалось добиться для SizeStyle