如何向 QuillJS 编辑器添加自定义字体大小

Question

如何使用 QuillJS 将自定义字体大小添加到工具栏？我尝试过两种方法：

// Initiate the editor
        let toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'align': [] }],
            [{ 'size': ['10px', '20px', '80px'] }],
            [{ 'color': ['#FFF'] }]
        ];
        this.editor = new Quill('#executive-control-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

和

<div id="toolbar">
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
            <select class="ql-align"></select>
        </span>
        <span class="ql-format-group">
          <select title="Size" class="ql-size">
            <option value="10px">Small</option>
            <option value="13px">Normal</option>
            <option value="18px">Large</option>
            <option value="32px">Huge</option>
          </select>
        </span>
        <span class="ql-formats">
            <button class="ql-image"></button>
        </span>
    </div>

但是它们都不起作用。我在这里缺少什么吗？我也尝试从值中删除 "px" ；还是什么都没有。

Answer 1

上面接受的答案对我不起作用，但让我走上了正轨。

这是我必须做的事情，让文本编辑器设置自定义字体大小（并且还为基础值中的字体大小设置内联样式，而不是 CSS 类）：

var Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '18px'];
Quill.register(Size, true);

var toolbarOptions = [
    [{ 'size': ['14px', '16px', '18px'] }],
];

var quill = new Quill("#quillElementSelector", {
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    }
});

我还必须修改 CSS 以覆盖工具栏下拉列表上的标签。请注意，CSS 选择器中的“数据值”值必须与上面指定的值匹配。

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: 'Normal';
    font-size: 14px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: 'Large';
    font-size: 16px !important;
}

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

Answer 2

借助@mfranchi 和@pmarreck，我得到了一个标准的“MS Word”字体大小列表，其中包含以下内容：

const fontSizeArr = ['8px','9px','10px','12px','14px','16px','20px','24px','32px','42px','54px','68px','84px','98px'];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

var toolbarOptions = [
    [{ 'size': fontSizeArr }],
];

const quill = new Quill("#quillElementSelector", {
    modules: {
        toolbar: toolbarOptions,
    },
    theme: 'snow',
});

这是一个纯 CSS 解决方案，我发现它是 this Quill 问题：

.ql-snow{
.ql-picker{
    &.ql-size{
        .ql-picker-label,
        .ql-picker-item{
            &::before{
                content: attr(data-value) !important;
            }
        }
    }
}
}

Answer 3

现在有点奇怪，所以我可以将其添加到 Quill 配置中。但目前，它不起作用的原因是 Quill 默认使用类来调整大小，而您想要的是内联样式。您可以通过以下方式更改此设置：

var Size = Quill.import('attributors/style/size');
Quill.register(Size, true);

// Rest is the same
var editor = new Quill('#editor');

Answer 4

我使用 Quill 2.0 和自定义工具栏。我已经实现了@Andrew的第一个解决方案，如下：

• 首先使用他的代码和我的自定义字体大小数组创建一个测试页面：

   // Custom font sizes ('' is default)
   const fontSizeArr = ['', '6pt', '8pt', '9pt', '10pt', '11pt', '12pt', 
   '14pt', '16pt', '20pt', '22pt', '24pt', '26pt', '28pt', '36pt', '48pt',
   '72pt'];
  
  

• 上述结果导致所有值显示为“正常”的下拉菜单，但实际上是正确的行为。
• 在我的自定义工具栏中，我使用了渲染的相同选择，但作为每个选项的文本，我希望在工具栏上看到文本：

  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="">Default</option>
    <option value="6pt">6</option>
    <option value="8pt">8</option>
    <option value="9pt">9</option>
    <option value="10pt">10</option>
    <option value="11pt">11</option>
    <option value="12pt">12</option>
    <option value="14pt">14</option>
    <option value="16pt">16</option>
    <option value="20pt">20</option>
    <option value="22pt">22</option>
    <option value="24pt">24</option>
    <option value="26pt">26</option>
    <option value="28pt">28</option>
    <option value="36pt">36</option>
    <option value="48pt">48</option>
    <option value="72pt">72</option>
  </select>
  

现在 Quill 2.0.2 中的行为是我喜欢的：

我还需要@Andrew 的CSS 修复。如果没有这个，工具栏中显示的选定字体将不会根据文本中的实际选择进行更新（即，当我将光标放在 22pt 文本内时，工具栏中不会显示“22”。