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 stackoverflow.com/questions/38623716/… — erw13n
– erw13n, Commented May 12, 2019 at 22:20
@OrthoHomeDefense your code is fine, uncomment the "constructor" and import Quill as follow "declare const Quill: any;" github.com/angular/angular-cli/issues/… — erw13n
– erw13n, Commented May 13, 2019 at 11:35

ahmeticat · Accepted Answer · 2019-05-13 12:25:39Z

5

+100

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

edited May 13, 2019 at 12:25

answered May 13, 2019 at 7:19

ahmeticat

1,9391 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Piñeiro · Accepted Answer · 2019-05-13 09:19:38Z

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

Collectives™ on Stack Overflow

Angular 6 PrimeNG custom editor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related