3

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?

Sathiamoorthy
  • 8,831
  • 9
  • 65
  • 77
Manu Chadha
  • 15,555
  • 19
  • 91
  • 184

4 Answers4

5

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.

Sathiamoorthy
  • 8,831
  • 9
  • 65
  • 77
2

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');
Manu Chadha
  • 15,555
  • 19
  • 91
  • 184
  • the explanation here was helpful - https://stackoverflow.com/questions/54585763/what-is-the-difference-between-import-as-react-from-react-vs-import-react-fr – Manu Chadha Feb 10 '20 at 05:18
1

Try using the ngx-quill wrapper.

ekalin
  • 872
  • 7
  • 19
  • I'll give `ngx-quill` a try. I need validation feature `forms` as some of my `wysiwyg` editors are part of the form. But I am unable to make it work with `Quill`. I might seek your help as I am sure to get stuck! :) – Manu Chadha Feb 09 '20 at 15:10
  • I tried to use `ngx-quill` but am getting error. Could you please take a look at https://stackoverflow.com/questions/60140987/error-quill-module-ts-is-missing-from-the-typescript-compilation-please-make – Manu Chadha Feb 09 '20 at 20:29
1

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.

Ryo Wu
  • 11
  • 2
  • You should add this as a comment on the accepted answer instead, so that all the requisite information is contained in one answer. – scatter Jul 29 '22 at 03:38
  • I haven't got my 50 reputation point to add a comment on the accepted answer. ：） – Ryo Wu Jul 30 '22 at 04:04
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32342467) – ahuemmer Aug 01 '22 at 06:55