Geek Answers Handbook

How to add font types to Quill js with toolbar options?

I created a rich text area with Quill js . I have the following options for the toolbar:

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>

Currently, when I try to add more types editing the “font” parameter in the toolbar (for example, “font”: ['arial']), the selection options simply display “Sans-serif” instead of displaying the “Arial” option, I see the default settings (Sans Serif, Serif, Monospace) and the custom options I want to add.

In addition, I tried the attribute setting shown in the documentation, but with my current configuration, it just displays only the default settings. Maybe I missed something.

I hope I was confident in my doubts, and someone could help me.

UPDATE:

To be a little clearer, I'm trying to add extra fonts by following the configuration

+5
source share
1 answer

That's what you need.

The process is as you need 4 components :

  • The select tag with the ql-font class. This will contain the new font options.
  • Add new fonts to the white list. This needs to be defined before you invoke the Quill constructor in Javascript.
  • Define font-family for each label in the drop-down list. Example: font-family: "Inconsolata"
  • Define the content font families to be used in the text area. Following the example of the third component: .ql-font-inconsolata { font-family: "Inconsolata";}

Update

I read the documentation to help you, and they mentioned that

At the simplest level, toolbar elements can be defined with a simple array of format names ...

Alternatively, you can manually create a toolbar in HTML by passing a DOM element or selector to Quill; and this is the solution presented in this answer. On the other hand, the documentation is not mentioned, but after many attempts to load data using an array (without any success), I noticed that this is not possible. So, here is my contribution and the reason why I posted this update . I made equivalences (JS and HTML) for manual implementation.

A custom toolbar can be created using HTML and the JS constructor. The constructor will get #toolbar-container as a toolbar in the modules section.

Then you can generate the same structure using only HTML tags. The concept is very similar. For instance:

  • If in JS we declare such an array: ['bold', 'italic', 'underline', 'strike'] in HTML will be:

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

  • In JS there is [{ 'header': 1 }, { 'header': 2 }] in HTML there will be

    <span class="ql-formats"> <button class="ql-header" value="1"></button> <button class="ql-header" value="2"></button> </span>

So here you have a complete example in this code snippet:

 // 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>
+7
source

More articles:


All Articles