使用内联样式时无法设置 Quill 编辑器名称大小选项

Question

我需要使用内联样式，所以我使用了以下代码：

var BackgroundStyle = Quill.import('attributors/style/background');
var ColorStyle = Quill.import('attributors/style/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(SizeStyle, true);

如果我只是添加此代码，则没有任何效果。所以，我改变了工具栏配置：

    var config = {
        modules: {
        toolbar: [
...

            [{ 'size': ['10px', false, '18px', '32px'] }],  // custom dropdown
]}};

editor = new Quill(editorElem, config);

它开始工作，但在大小的下拉列表中，所有值看起来都像“正常”：

那么如何更改下拉列表呢？

更新：我找到了解决方案。我也不得不改变我的风格。因此，现在当我添加此代码时，一切正常（对其他样式执行相同操作）：

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before{
    content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: 'Huge';
  font-size: 32px;
}

Answer 1

样式也改一下。添加此代码以使一切正常工作（对其他样式执行相同的操作）：

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before{
    content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: 'Huge';
  font-size: 32px;
}

_{这个答案是作为对问题Can't make Quill editor name size options when I use inline styles由 OP模仿者在 CC BY-SA 3.0 下使用内联样式的编辑而发布的。}