Custom font sizes problem

See original GitHub issue

Hi, I’m trying to add custom font sizes to the editor by using customOptions but somehow the editor doesn’t show the proper labels and the inline style is not applied. Here is my config (modules and customOptions) from the component.ts:

this.customOptions = [{
    import: 'attributors/style/size',
    whitelist: ['10', '16', '22', '36', '48', '72', '144']
}];

this.quillModules = {
    toolbar: [
        [{ 'size': [false, '10', '16', '22', '36', '48', '72', '144'] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [false, 'center', 'right', 'justify'] }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    ]
};

The view - component.html:

<quill-editor *ngIf="isInEditMode" 
    [(ngModel)]="content" 
    [modules]="quillModules"
    [customOptions]="customOptions"
    (onEditorCreated)="setFocus($event)">
</quill-editor>

How it is manifested: screen shot 2018-05-17 at 15 45 50

What is generated (from the dev tools): screen shot 2018-05-17 at 16 04 36

Can you take a look and possibly guide to right direction? Maybe I’m missing something.

Thank you.

Issue Analytics

State:
Created 5 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

5reactions

KillerCodeMonkeycommented, May 17, 2018

i think you need to create a custom toolbar with the correct labels and values or create the mandatory css-classes for each size:

https://stackoverflow.com/questions/38623716/how-to-add-custom-font-sizes-to-quilljs-editor

.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;
}

1reaction

djfishecommented, May 17, 2018

Yeah this works! I would like to add that, in order to see the current selection in the dropdown, you need to add additional selectors, like this:

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

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

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

Thank you!