Angular 6 PrimeNG custom editor

Question

I am trying to customize my PrimeNG Editor I'm having adding a select dropdown list with custom font sizes [12px, 14px, 16px...]

Here is the component HTML

<p-editor [(ngModel)]="value" (onTextChange)="onTextChanged($event)">
            <p-header>
                    <span class="ql-formats">
                     ...
                      <select class="ql-size">
                            <option value="12px">12</option>
                            <option value="14px">14</option>
                            <option value="16px">16</option>
                        </select>
                    </span>
                   ...
                  </p-header>               
    </p-editor>

I can get the select list to show with all the font sizes

I'm not sure how to add the functionality to change the font size when selecting an option in the list. I don't see any examples in their docs for typescript. How can I make a select list of custom font sizes?

Here are the docs I followed

example

Check how to do it on quill https://stackoverflow.com/questions/38623716/how-to-add-custom-font-sizes-to-quilljs-editor — erw13n, May 12 '19 at 22:20
@erw13n I've tried that but it doesn't seem to work in Typescript. — Train, May 13 '19 at 02:13
@OrthoHomeDefense your code is fine, uncomment the "constructor" and import Quill as follow "declare const Quill: any;" https://github.com/angular/angular-cli/issues/7526#issuecomment-325804143 — erw13n, May 13 '19 at 11:35
@erw13n Thanks, it wasn't working before. I was declaring Quill as `import * as Quill from 'quill'` After changing it to your suggestion it started to work. — Train, May 13 '19 at 16:05

ahmeticat · Accepted Answer · 2019-05-13T12:25:39.430

Firstly,put your component.ts

import { Editor } from 'primeng/editor';
declare var Quill: any;

and add this line in constructor

var fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['24px', '48px', '100px', '200px'];
Quill.register(fontSizeStyle, true);

At the last,change your html

<span class="ql-formats">
   <select class="ql-size">
       <option value="24px">24</option>
       <option value="48px">48</option>
       <option value="100px">100</option>
       <option value="200px">200</option>
   </select>
</span>

Example

Daniel Piñeiro · Answer 2 · 2019-05-13T09:19:38.550

First get the style/size whitelisted in the .ts:

constructor(){
    var fontSizeStyle = Quill.import('attributors/style/size');
    fontSizeStyle.whitelist = ['0.75em','1em','1.5em','2.5em', '24px', '48px', '100px', '200px'];
    Quill.register(fontSizeStyle, true);
}

Now in the html file we used this whitelisted options:

<span class="ql-formats">
   <select class="ql-size">
     <option value="0.75em">small</option>
     <option value="1em" selected></option>
     <option value="1.5em">large</option>
     <option value="2.5em">huge</option>
   </select>
 </span>
 <span class="ql-formats">
   <select class="ql-size">
      <option value="24px">24</option>
      <option value="48px">48</option>
      <option value="100px">100</option>
      <option value="200px">200</option>
    </select>
 </span>

Check the change of the value of the first dropdown options.

You can declare the var Quill so it doesn't have problems with the undefined variable: (this is how primeng does it too)

declare var Quill: any;

Working example here:

https://stackblitz.com/edit/quill-55477705?file=src/app/app.component.ts

Angular 6 PrimeNG custom editor

2 Answers2