[SOLVED] how to install Quill.js in Angular

how to install Quill.js in Angular

Sorry, my understanding of how packaging works in Angular is terrible!! I want to use a WYSIWYG editor in my Angular6 application. I have zeroed down to quill.js. https://quilljs.com/docs/quickstart/

But I am confused how I can include it in my project. I have added it as a dependency in my package.json.

  "dependencies": {
...
    "quill": "1.3.6"
  }

and then I tried to use for the following textarea

<textarea id="question-description" type="text" class="form-control" formControlName="questionDescription" [ngClass]="validateField('questionDescription')"  rows="4"></textarea>

and initialize Quill like following in ngAfterViewInit

var quill = new Quill('#question-description', {
  theme: 'snow'
});

But I get error

ReferenceError: Quill is not defined
    at NewPracticeQuestionComponent.push../s

I have also added declare var Quill:any; at the top of the Component's .ts file

I can see in node_modules that there is a quill folder and it has dist/quill.js where I suppose Quill object must be defined and exported (haven't checked it though).

What am I doing wrong?

Solution

Follow these simple steps to install quilljs in Angular application

Install the below packages

npm install quill npm install ngx-quill npm install @types/quill

Add the below css files in angular.json file.

"styles": ["./node_modules/quill/dist/quill.core.css",
    "./node_modules/quill/dist/quill.bubble.css",
    "./node_modules/quill/dist/quill.snow.css",
    "src/styles.css",
]

Add the below module in app.module.ts file under

`QuillModule.forRoot({
      customOptions: [{
        import: 'formats/font',
        whitelist: ['mirza', 'roboto', 'aref', 'serif', 'sansserif', 'monospace']
      }]
})`

Add the below code in app.component.html.

<quill-editor [styles]="{height: '200px'}"></quill-editor>

I have created Stackblitz demo here.