I want to add custom size and respective names to the Font size dropdown provided in react-quill library.

I was able to do it with Quilljs but after importing the Quill from "react-quill", not able to figure out where to add registered SizeStyle.

I have done it with pain quilljs the jquery version and it's working. But when I try the same in React-quill it's not working.

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);

In the render method:

What to do?

Expected:

Custom dropdown with selection for the Sizes's mentioned above

I want to add custom size and respective names to the Font size dropdown provided in react-quill library.

I was able to do it with Quilljs but after importing the Quill from "react-quill", not able to figure out where to add registered SizeStyle.

I have done it with pain quilljs the jquery version and it's working. But when I try the same in React-quill it's not working.

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);

In the render method:

What to do?

Expected:

Custom dropdown with selection for the Sizes's mentioned above

• javascript
• reactjs
• ecmascript-6
• quill
• react-quill

1 Answer 1

Was able to figure it out. When using custom fonts or toolbar, then the toolbar options must not be passed with the formats and things to show. Instead of this we need to add the HTML with the options and the id must be passed to the modules.toolbar.container

Code:

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>

Have done it for fonts, same way was able to achieve for SizeStyle