How to use Quilljs Editor in Angular 15 Project

Question

I have trouble integrating a quilljs editor in my angular 15 web project.

I firstly installed the dependencies with the following commands, which worked fine:

npm install ngx-quill@latest
npm install quill --save

I tried importing it in my component with the name BeitragCreateComponent.

import { QuillModule } from 'ngx-quill';

@Component({
  standalone: true,
  imports: [SbbInputModule,   QuillModule.forRoot()],
  selector: 'app-beitrag-create',
  templateUrl: './beitrag-create.component.html',
  styleUrls: ['./beitrag-create.component.scss'],

})

export class BeitragCreateComponent {
  public quillconfig = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike', 'image', 'video'],
        [{'size': ['xsmall', 'small', 'medium', 'large', 'xlarge']}],
        [{'align': []}],
        ['clean'],
        ['link']
      ]
    }
  };


}

but I only get error messages like:

ERROR
node_modules/ngx-quill/lib/quill-editor.component.d.ts:2:21 - error TS2614: Module '"quill"' has no exported member 'Delta'. Did you mean to use 'import Delta from "quill"' instead? 2 import QuillType, { Delta } from 'quill';

I then tried importing and integrating also 'Delta' it still did not work.

After that I tried only writing QuillModule instead of QuillModule.forRoot() in the imports. I also tried the same things in my main.ts file.

But when I use it like this, it works:
But I want have it imported in my component and not having to use this url.

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

I checked out the quilljs documentation and some example projects and I still am not able to find the right solution.

score 1 · Answer 1 · answered Apr 25 '23 at 09:56

1

Have a look at this example:

https://github.com/KillerCodeMonkey/ngx-quill-example

I had the same problem (or it seems to be) and i solved it by downgrading the package @types/quill and adding:

"allowedCommonJsDependencies": ["quill"] to my angular.json

answered Apr 25 '23 at 09:56

Otrebor

416
4
12

what specific versions did you use for Angular 15? – JanuszFrontEnd'u Jul 31 '23 at 15:44

score 1 · Answer 2 · answered Jun 19 '23 at 17:22

Good observation by @Otrebor regarding the version of @types/quill.

I managed to install Quill with Angular 15 using:

npm i ngx-quill@21
npm i @types/quill@1

as version 22 required Angular 16, and @types/quill@2 leads to the error message regarding "Delta".

score 0 · Answer 3 · edited May 25 '23 at 15:35

I'm having this issue since I don't know how long. Also now with the latest Quill version.

What I usually do, and it's NOT a nice fix nor one I support or stand by but I do this.

In the node_modules/ngx-quill/lib/quill-editor.component.d.ts file I replace line 2:

import QuillType, { Delta } from 'quill';

with:

import QuillType from 'quill';

import Delta from 'quill';

This fixes the problem for me, I also thought of using the answer of @Otrebor, but no success.

How to use Quilljs Editor in Angular 15 Project

3 Answers3