如何将自定义字体大小添加到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

现在有点奇怪，所以我可以将它添加到Quill配置中。但是现在，它不工作的原因是Quill默认使用类来调整大小，而你想要的是内联样式。你可以改变这个：

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

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

Answer 2

上面接受的答案不适合我，但把我放在正确的轨道上。

这是我必须做的有文本编辑器（在基础值，而不是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; 
}