2

I am trying to integrate PrimeNG editor in JHispter generated angular app.
I have followed the PrimeNG site for the general instructions and editor instructions:

  1. npm install primeng --save
  2. npm install @angular/animations --save
  3. npm install quill --save
  4. Add Quill to scripts in angular-cli.json
  5. Imported EditorModule in home.modules
  6. Added <p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor> in the html file
  7. executed npm start command to run the app.

The UI looks like below enter image description here and getting below error:

ERROR ReferenceError: Quill is not defined at Editor.ngAfterViewInit (webpack-internal:///./node_modules/primeng/components/editor/editor.js:36) enter image description here

Thanks

Maher
  • 2,517
  • 1
  • 19
  • 32
Laxman
  • 2,643
  • 2
  • 25
  • 32
  • Have you followed these instructions? https://stackoverflow.com/questions/44162427/steps-to-integrate-primeng-with-jhipster – Gaël Marziou Jan 14 '18 at 10:37
  • @GaëlMarziou tried above instructions also. This error is, because the home module is not able to find `quill.js`. – Laxman Jan 15 '18 at 05:15

2 Answers2

2

I had the same error.

Added the following line into my webpack.common.js to the plugins and now it is working.

new webpack.ProvidePlugin({ Quill: "quill" })
R. Kuehteubl
  • 101
  • 1
  • 9
0

I was having the same issue.

I am not sure this is the proper solution but it worked for me -

add below line to the index.html - 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.5/quill.min.js" integrity="sha256-OEsiRE77EL46ZjgPqmsXfsNcOQPrMG/M6hHBF65jXP4=" crossorigin="anonymous"></script>
sandesh dahake
  • 1,028
  • 7
  • 16