如何在React-quill中添加自定义字体

Question

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

我可以用Quilljs来做这件事，但是在从"react- Quill“导入了quill之后，我不知道在哪里添加已注册的SizeStyle。

我在jquery版本的pain quilljs中做到了这一点，并且它是有效的。但当我在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);

在render方法中：

该怎么办呢？

期望值：

带有上述尺寸选择的自定义下拉列表

Answer 1

能够弄清楚这一点使用自定义字体或工具栏时，工具栏选项不能与要显示的格式和内容一起传递。相反，我们需要添加带有选项的超文本标记语言，并且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上实现