Custom font size with quill editor in Angular 10

Published

I am trying to get custom font size in Quill editor like below

enter image description here

I wrote the below code

 <quill-editor [formControlName]="formControlData?.name" [options]="editorOptions"
        (ready)="onEditorCreated($event)" (change)="onContentChanged($event)">

      </quill-editor> 

and below is the config

   public editorOptions = {
theme: 'snow',
modules: {
  toolbar: {
    container:
      [
        [{ 'placeholder': ['[GuestName]', '[HotelName]'] }], // my custom dropdown
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        //  ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
        [{ 'size': Size.whitelist }],
        //  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        //  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        // [{ 'font': ['10px', '20px', '80px'] }],
        //  [{ 'align': [] }],

        //  ['clean']                                    // remove formatting button
        ['link', 'image']
      ],
    handlers: {
      "placeholder": function (value) {
        if (value) {
          const cursorPosition = this.quill.getSelection().index;
          this.quill.insertText(cursorPosition, value);
          this.quill.setSelection(cursorPosition + value.length);
        }
      }
    }
  }
}
  };


var Size = Quill.import('attributors/style/size');
Size.whitelist = ['12px', '16px', '18px'];
Quill.register(Size, true);

When I ran the code . I see the below output. Can you please tell me what I did wrong

enter image description here

Source: Angular Questions

Published
Categorized as angular, quill Tagged ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq