CODEWITHSUNDEEP
angulareditorjhipsterprimeng
Laxman
Laxman

Reputation: 2690

How to Integrate PrimeNG editor in angular app created with Jhipster

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

Upvotes: 2

Views: 1730

Answers (2)

R. Kuehteubl
R. Kuehteubl

Reputation: 101

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" })

Upvotes: 2

sandesh dahake
sandesh dahake

Reputation: 1026

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>

Upvotes: 0

Related Questions