CODEWITHSUNDEEP
angularangular6quill
Manu Chadha
Manu Chadha

Reputation: 16723

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?

Upvotes: 4

Views: 9295

Answers (4)

Sathiamoorthy
Sathiamoorthy

Reputation: 11580

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.

Upvotes: 5

Ryo Wu
Ryo Wu

Reputation: 21

Thanks the answer from Sathiamoorthy. That helps me a lot. I want to add more comments here during my quill setup. Since my Angular CLI version is 12.0. I have to identify the specific version to make it work. (I spent 6 hours to figure this out)

Like:

npm install quill@1.3.7

npm install ngx-quill@13.0.1

npm install @types/quill@1.3.10

Hope this helps the people still in frustration.

Upvotes: 2

Manu Chadha
Manu Chadha

Reputation: 16723

This linked helped (https://github.com/quilljs/quill/issues/777). I had to add the following lines, however I don't really understand well how it works and what the steps mean

 import * as Quill from 'Quill';

let quill = new Quill('#editor');

Upvotes: 2

ekalin
ekalin

Reputation: 1012

Try using the ngx-quill wrapper.

Upvotes: 1

Related Questions