PrimeNG Quill Editor custom font-size setting issue with Angular 9

Question

I want to to set custom font sizes in quill editor with Prime NG. I am using Angular 9.1. I upgraded my application from Angular 5 to Angular 9.In Angular 5 its working fine but after upgradation to Angular9 it stopped working.

Here is what I did in my html code :

 <p-editor  id="id" [maxlength]="maxLength" (onTextChange)="sample($event)"
                  spellcheck="true">
            <p-header>
                <span class="ql-formats">
                <select class="ql-size">
                                 <option value="8px">small</option>
                                 <option value="9px">9</option>
                                 <option value="10px">10</option>
                                 <option value="12px">12</option>
                                 <option value="14px">14</option>
                                 <option value="16px">16</option>
                                 <option value="18px">18</option>
                                 <option value="20px">20</option>
                                 <option value="22px">22</option>
                                 <option value="24px">24</option>
                                 <option value="26px">26</option>
                                 <option value="28px">28</option>
                                 <option value="36px">36</option>
                                 <option value="48px">48</option>
                                 <option value="72px">72</option>
                </select>
                    </span>
                <span class="ql-formats">
           <button  class="ql-bold q1-box first" aria-label="Bold" title="Bold"></button>
           <button class="ql-italic q1-box" aria-label="Italic" title="Italic"></button>
           <button class="ql-underline q1-box" aria-label="Underline" title="Underline"></button>
           <button class="ql-strike q1-box" aria-label="Strikethrough" title="Strikethrough"></button>
           <button class="ql-list q1-box" value="ordered" type="button" title="Number bullets"></button>
           <button class="ql-list ql-active q1-box" value="bullet" type="button" title="Bullets"></button>
       </span>

                <span class="ql-formats">
              <button class="ql-align ql-align-left q1-box" title="left" value=""></button>
              <button class="ql-align ql-align-center q1-box" title="center" value="center"></button>
              <button class="ql-align ql-align-right q1-box" title="right" value="right"></button>
                    <!--<select class="ql-align q1-box" title="Alignment"></select>-->
           <button class="ql-indent q1-box" value="+1" title="Right indent"></button>
           <button class="ql-indent q1-box last" value="-1" title="Left indent"></button>
           </span>
                <span class="ql-formats">
            <button class="ql-link" aria-label="Indent" title="Link"></button>
        </span>
            </p-header>
        </p-editor>

And my TS file code is

constructor() {
        var fontSizeStyle = Quill.import('attributors/style/size');
        fontSizeStyle.whitelist = [
            '8px', '9px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '36px', '48px', '72px'
        ];
        Quill.register(fontSizeStyle, true);
    }

Font sizes are visible in drop down but text size is not getting changed on selection. Can any body please help me on this?

I am also facing the same issue after upgrading my angular from 7 to 8 and primeng from 6 to 8. Please let me know if anyone has any solution for the same — Prashant Agrawal
– Prashant Agrawal, Commented May 28, 2021 at 9:11

Marcelo Gomes · Accepted Answer · 2022-01-28 14:47:30Z

0

After few months, the size works with "words". Try it:

<select title="Font Size" class="ql-size">
   <option value="small">small</option>
   <option value="normal">normal</option>
   <option value="large">large</option>
   <option value="huge">huge</option>
</select>

answered Jan 28, 2022 at 14:47

Marcelo Gomes

16910 bronze badges

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

Collectives™ on Stack Overflow

PrimeNG Quill Editor custom font-size setting issue with Angular 9

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related