Monday, May 13, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
59
rated 0 times [  66] [ 7]  / answers: 1 / hits: 42318  / 7 Years ago, mon, may 1, 2017, 12:00:00

I have made a rich text area made with Quill js. I have the next options for the tool bar:





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' option on toolbar (e.g. 'font': ['arial']), the select options just display Sans Serif instead of display the Arial option. What I spect is see the default options (Sans Serif, Serif, Monospace) plus custom options that I want to add.



Also, I have tried the customizing attributors shown on the documentation, but with my current configuration, it just display just the default options. Maybe I'm missing something.



I hope I was clear with my doubt and someone could help me.



UPDATE:



Just to be a little more clear, I am trying to add more fonts following the Quill Container configuration




Container: At the simplest level, toolbar controls can be specified by a simple array of format names.



More From » jquery
 Answers
82

This is what you need.



The process is like this you need 4 components:




  1. A select tag with a ql-font class. This will contain the new font options.

  2. Add the new fonts to the whitelist. This has to be defined before you call the the Quill constructor in Javascript.

  3. Define the font-family for each label in the dropdown. Example: font-family: Inconsolata

  4. Define the content font-families that will be used in the text area. Following the example in the 3rd component: .ql-font-inconsolata { font-family: Inconsolata;}



Update:



I read the documentation in order to help you and they mention that




At the simplest level, toolbar controls can be specified by a simple array of format names...




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



A custom toolbar can be created using HTML and a JS constructor. The constructor will receive the #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 example:




  • If in JS we declare an array like this: ['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 is [{ 'header': 1 }, { 'header': 2 }] in HTML 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

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

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




[#57937] Saturday, April 29, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lucianom
Add To Favorites
Follow
Total Points: 601
Total Questions: 98
Total Answers: 109
Location: Kenya
Member since Fri, Dec 23, 2022
1 Year ago
lucianom questions
Tue, Feb 22, 22, 00:00, 2 Years ago
Wed, May 5, 21, 00:00, 3 Years ago
Sun, Jan 24, 21, 00:00, 3 Years ago
Sat, Aug 15, 20, 00:00, 4 Years ago
Mon, Jun 22, 20, 00:00, 4 Years ago
View All
;