如何將自定義字體大小添加到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; 
}