angularangular6quill

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.