Araç çubuğu seçenekleriyle Quill js'de yazı tipi türleri nasıl eklenir?

Question

Quill js ile yapılmış zengin bir metin alanı oluşturdum. Ben aracı çubuğu için bir sonraki seçenek vardır:

new Quill('#quilljs-container', { 
 
    modules: { 
 
     toolbar: [ 
 
      ['bold', 'italic', 'underline', 'strike'],  // toggled buttons 
 
      ['blockquote', 'code-block', 'link'], 
 

 
      [{ 'header': 1 }, { 'header': 2 }],    // custom button values 
 
      [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
 
      [{ 'script': 'sub'}, { 'script': 'super' }],  // superscript/subscript 
 
      [{ 'indent': '-1'}, { 'indent': '+1' }],   // outdent/indent 
 
      [{ 'direction': 'rtl' }],       // text direction 
 

 
      [{ 'color': [] }, { 'background': [] }],   // dropdown with defaults from theme 
 
      [{ 'font': [] }], 
 
      [{ 'align': [] }], 
 

 
      ['clean']           // remove formatting button 
 
     ] 
 
    }, 
 
    theme: 'snow' 
 
});

<!-- Style --> 
 
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"> 
 

 
<!-- quill js container --> 
 
<div id="quilljs-container"> </div> 
 

 
<!-- Add quill js on the project --> 
 
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

Şu

, ben araç çubuğunda 'yazı' seçeneğini düzenleyerek daha fazla türde (örneğin 'yazı' eklemeye çalıştığınızda: [ 'arial' ]), seçim seçenekleri sadece "Arial" seçeneğini görüntülemek yerine "Sans Serif" i gösterir. Spektrumlarım, varsayılan seçenekleri ("Sans Serif", "Serif", "Monospace") ve eklemek istediğim özel seçenekleri görüyor.

Ayrıca, dokümantasyon gösterilen customizing attributors denedi, ama benim şimdiki yapılandırma ile, sadece sadece varsayılan seçenekleri görüntüler. Belki bir şey özlüyorum.

benim şüphe ve bana yardım edebilecek biriyle açıktı umuyoruz.

GÜNCELLEME:

Sadece ben Quill Container configuration

Konteyner aşağıdaki fazla yazı eklemek çalışıyorum biraz daha açık olmak: En basit düzeyde, araç çubuğu kontrolleri belirtilebilir basit bir format isimleri dizisi ile.

Answer 1

Bu ne ihtiyaç vardır. Bir ql-font sınıfla

1. A select etiketi:

   süreci bu gibi 4 bileşenlerini ihtiyaç olduğunu. Bu yeni yazı tipi seçeneklerini içerecektir.

2. Yeni yazı tiplerini beyaz listeye ekleyin. Bu, Javascript'teki Quill yapıcısını çağırmadan önce tanımlanmalıdır.
3. açılan her label için font-family tanımlayın. Örnek: font-family: "Inconsolata"
4. metin alanında kullanılacak içerik font-aileleri tanımlayın. 3 bileşende örneği aşağıdadır: .ql-font-inconsolata { font-family: "Inconsolata";}

Güncelleme:

sana yardım etmek için belgeleri okuyun ve onlar söz basit düzeyde

, araç çubuğu kontrolleri can olduğunu basit bir biçim adları dizisi ile belirtilebilir ...

El ile de oluşturabilirsiniz. Quill'le içine DOM elemanını veya seçici geçirerek HTMLbir araç çubuğu; ve bu cevapta sunulan çözüm budur.Öte yandan, belgelere bahsetmiyoruz ama (herhangi bir başarı olmadan) dizisini kullanarak yükleme verisine birçok yol denedikten sonra, bunun mümkün olmadığını farkettim. Yani, burada benim katkı ve bu güncelleştirme güncelleştirme neden oldu. Manuel uygulama için eşdeğerlikleri (JS ve HTML) yaptım.

HTML kullanılarak oluşturulabilir A özel araç çubuğu ve bir JS yapıcı. Kurucu, bölümünde toolbar olarak alır.

Daha sonra, yalnızca HTML etiketlerini kullanarak aynı yapıyı oluşturabilirsiniz. Konsept çok benzer. Örneğin:

• Eğer JSbiz böyle bir diziyi bildirmek: ['bold', 'italic', 'underline', 'strike'] HTML olacaktır:

  <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>

• JSyılında [{ 'header': 1 }, { 'header': 2 }] yılında HTML olduğunu

Yani, burada bu kod parçacığı tam bir örnek var:

// Add fonts to whitelist 
 
var Font = Quill.import('formats/font'); 
 
// We do not add Sans Serif since it is the default 
 
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial']; 
 
Quill.register(Font, true); 
 

 

 
// We can now initialize Quill with something like this: 
 
var quillObj = new Quill('#quilljs-container', { 
 
    modules: { 
 
    toolbar: '#toolbar-container' 
 
    }, 
 
    placeholder: 'This is a font test...', 
 
    theme: 'snow' 
 
});

<!-- Style --> 
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
<style> 
 
    /* Set dropdown font-families */ 
 
    
 
    #toolbar-container .ql-font span[data-label="Sans Serif"]::before { 
 
    font-family: "Sans Serif"; 
 
    } 
 
    
 
    #toolbar-container .ql-font span[data-label="Inconsolata"]::before { 
 
    font-family: "Inconsolata"; 
 
    } 
 
    
 
    #toolbar-container .ql-font span[data-label="Roboto"]::before { 
 
    font-family: "Roboto"; 
 
    } 
 
    
 
    #toolbar-container .ql-font span[data-label="Mirza"]::before { 
 
    font-family: "Mirza"; 
 
    } 
 
    
 
    #toolbar-container .ql-font span[data-label="Arial"]::before { 
 
    font-family: "Arial"; 
 
    } 
 
    /* Set content font-families */ 
 
    
 
    .ql-font-inconsolata { 
 
    font-family: "Inconsolata"; 
 
    } 
 
    
 
    .ql-font-roboto { 
 
    font-family: "Roboto"; 
 
    } 
 
    
 
    .ql-font-mirza { 
 
    font-family: "Mirza"; 
 
    } 
 
    
 
    .ql-font-arial { 
 
    font-family: "Arial"; 
 
    } 
 
    /* We do not set Sans Serif since it is the default font */ 
 
</style> 
 
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"> 
 

 

 
<div id="standalone-container"> 
 
    <div id="toolbar-container"> 
 
    <span class="ql-formats"> 
 
     <select class="ql-font"> 
 
     <option selected>Sans Serif</option> 
 
     <option value="inconsolata">Inconsolata</option> 
 
     <option value="roboto">Roboto</option> 
 
     <option value="mirza">Mirza</option> 
 
     <option value="arial">Arial</option> 
 
     </select> 
 
     <select class="ql-size"></select> 
 
    </span> 
 
    <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-color"></select> 
 
     <select class="ql-background"></select> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-blockquote"></button> 
 
     <button class="ql-code-block"></button> 
 
     <button class="ql-link"></button> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-header" value="1"></button> 
 
     <button class="ql-header" value="2"></button> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-list" value="ordered"></button> 
 
     <button class="ql-list" value="bullet"></button> 
 
     <button class="ql-indent" value="-1"></button> 
 
     <button class="ql-indent" value="+1"></button> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-direction" value="rtl"></button> 
 
     <select class="ql-align"></select> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-script" value="sub"></button> 
 
     <button class="ql-script" value="super"></button> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-clean"></button> 
 
    </span> 
 
    </div> 
 
</div> 
 
<!-- quill js container --> 
 
<div id="quilljs-container"></div> 
 
<!-- Add quill js on the project --> 
 
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>