3

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

我可以用 Quilljs 做到这一点，但是在从“react-quill”导入 Quill 之后，无法弄清楚在哪里添加注册的 SizeStyle。

我已经用 jquery 版本的痛苦 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);

在渲染方法中：

该怎么办？

预期的：

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

4

1 回答 1

2

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

于 2019-06-26T07:35:34.920 回答