Question

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

我能够使用Quilljs做到这一点，但是在从“反应羽毛笔”导入羽毛笔后，无法弄清楚在何处添加注册的SizeStyle。

我已经完成了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);

在render方法中：

该怎么办？

预期：

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

Answer 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实现相同的方式

如何在React-Quill中添加自定义字体大小

1 个答案: