如何在 React-quill 中添加自定义字体大小答案

【问题标题】：How to add custom font sizes in React-quill如何在 React-quill 中添加自定义字体大小
【发布时间】：2019-06-26 04:41:20
【问题描述】：

我想在 react-quill 库中提供的字体大小下拉列表中添加自定义大小和相应的名称。

我可以用 Quilljs 做到这一点，但是在从“react-quill”导入 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);

在渲染方法中：

怎么办？

预期：

带有上述尺寸选择的自定义下拉菜单

【问题讨论】：

标签： javascript reactjs ecmascript-6 quill react-quill

【解决方案1】：

能够弄清楚。使用自定义字体或工具栏时，不得将工具栏选项与要显示的格式和内容一起传递。取而代之的是，我们需要添加带有选项的 HTML，并且 id 必须传递给 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 也可以做到这一点

【讨论】：