Quill: Adding to font whitelist has no effect

[ccpu]

I am trying to add additional fonts to the font drop down list using whitelist mentioned in the documentation, however new fonts are not adding to the drop down list, i am using folloing code:

var fontAttributor = Quill.import("attributors/class/font");
fontAttributor.whitelist = [
'sofia', 'slabo', 'roboto', 'inconsolata'
];
Quill.register(fontAttributor, true);

Code Pen: http://codepen.io/Cyrus80/pen/ENLRxg

Not sure what I am doing wrong, could you please advise.

Thank you,

[benbro]

Does this example do what you need?
http://codepen.io/anon/pen/oYdyKa

@jhchen is there an easier way to add fonts?
I think the guide is missing the steps to add the fonts to the toolbar:
http://quilljs.com/guides/how-to-customize-quill/#customizing-attributors

[ccpu]

Yes, it works.
thank you,

[jhchen]

@benbro Thanks for the pen. There should be an easier way now that #901 is fixed. I'll update the docs with an example in the next release.

[jhchen]

Here's a full example: http://quilljs.com/playground/#custom-fonts

[re1naldo]

@jhchen I don’t understand that example. Where do you place that CSS? Should I also create formats/font directory in the same location as quill.js?

[jhchen]

Place the CSS wherever you want. formats/font is not a directory, it's an import specification for Quill (so basically you don't have to do anything here).

[jimchild49]

@jhchen awesome editor but... why it's necessary to rewrite all the toolbar buttons and selects as html when you just need to set some custom fonts families or fonts sizes, wouldn't be easy to just allow something like :

toolbar: [
       [{'size':  ['12px', '16px', '18px' ....] }]
       [{ 'color': [] }, { 'background': [] }],
       ['bold', 'italic', 'underline', 'strike'],
       [{ 'align': [] }],

 ]

[jhchen]

You can configure the toolbar as an array... https://quilljs.com/docs/modules/toolbar/#container

[jimchild49]

@jhchen I've seen this before, but am talking about when you add custom fonts family or custom fonts sizes, if you use the toolbar as an array you won't be able to specify custom font sizes (like 12, 11, 12, 14, 16, 18...), and you will be obligated to use something like toolbar: '#toolbar' and put all the toolbar buttons including bold, underline, link etc.... as html

[jhchen]

No you can pass in [{'size': ['12px', '16px', '18px']}]. Where I think the confusion is there is a difference between what the toolbar's purpose is, which is to send the editor commands. The default editor has a whitelist of options which '12px' is not a part of. This decoupling between the editor and toolbar is an architectural decision to allow greater modularization and customization. The other issue is we wanted to allow as much customization as possible using just CSS so the labels are controlled by that. So if you just pass in those options into the toolbar you will get a bunch of "Normal" labels instead of "12px".

[jimchild49]

@jhchen thank you for your explanation, it would be useful to add a note about that to the documentation, I didn't know that we can just use css to replace labels, when I saw the labels 'Normal' before I thought it's a bug and it's not possible to add sizes as array... now I understand better. Here is how to do in case someone wants to go this way :

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
}

[Jewcub]

@jhchen thank you for your explanation, it would be useful to add a note about that to the documentation, I didn't know that we can just use css to replace labels, when I saw the labels 'Normal' before I thought it's a bug and it's not possible to add sizes as array... now I understand better. Here is how to do in case someone wants to go this way :

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
}

I used this method, also from stack overflow ,
but I was only able to add 3 sizes, more after that it would always show up as normal, even though the code worked, the label shows 'normal'. for example I added 64px to the whitelist and all the other places. After I click on the 'normal' the normal label changes to 64.