CODEWITHSUNDEEP
javascripthtmlcssangularprimeng
Leminur
Leminur

Reputation: 361

PrimeNg Editor is not showing up - Angular

I have followed many tutorials, but as of yet, I did not manage to make PrimeNG's Editor module to show up! (Other modules like Toast or buttons are working fine, it's only Editor that is not working).

So here is what I did:

Import module in app.module.ts

import { EditorModule } from 'primeng/editor';

Installed packages

npm install quill --save

npm install @types/quill --save

Updated angular-cli.json

"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ] 
"scripts": [ "../node_modules/quill/dist/quill.js" ]

Inserted in HTML in 2 different ways

<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>

<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>

</form>

Reference them in TS file

this.avisoForm = new FormGroup({
        msgAviso: new FormControl,
        titAviso: new FormControl
    })

text: string;

Yet it does not show anything to the end-user, even though the p-editor tag is shown there:

End-User Screen

I think it could be a CSS problem, but I have checked on the CSS files, but I could barely retrieve a tag because it does not show anything in the page. (I have searched the one from PrimeNG original website, it does a tag but it's not in the CSS either).

I have searched on many sources, yet I haven't found any answer to solve that problem, can someone help me out? Thanks!

Sources:

Upvotes: 5

Views: 12661

Answers (4)

Max
Max

Reputation: 1

Ng prime v14 You must add "EditorModule" to app.module.ts in addition to what @dirtymind said. I was struggling to make it work and adding that import made it. Also, note that if you are using my version, Quill 2.0.0 won't work as expected. You need Quill 1.3.7

Upvotes: 0

Skander Jenhani
Skander Jenhani

Reputation: 75

If you followed the steps and you failed to display PrimeNG's Editor as it should, verify that quill.core.css and quill.snow.css exist in the folder "node_modules/quill/dist/"

If it is, try to import those files in your style.scss file like this :

@import url(../node_modules//quill/dist/quill.snow.css);
@import url(../node_modules//quill/dist/quill.core.css);

I'm sure it will work,

Upvotes: 0

Kamlesh
Kamlesh

Reputation: 6135

Resources of quill needs to be added to your application. Example setup with CLI is as follows;

npm install quill --save

Add Quill to scripts in angular.json

"scripts": [... "node_modules/quill/dist/quill.js"],

Add Quill css to styles in angular.json

"styles": [ ... "node_modules/quill/dist/quill.core.css", 
"node_modules/quill/dist/quill.snow.css"],

I have checked this solution multiple times with new angular 7 and existing projects, it works like charm :)

Upvotes: 5

DirtyMind
DirtyMind

Reputation: 2563

Just now I created a project for PrimeNg Editor

  1. Created new angular project with latest Version 6

  2. npm install primeng --save latest > 6.0.0

  3. npm install quill --save

  4. Edit angular.json. Update it carefully If Your angular.json and node_module are at same level of tree. The Edit like below I edited like this :

    "styles": [ "src/styles.scss", "node_modules/quill/dist/quill.core.css", "node_modules/quill/dist/quill.snow.css" ], "scripts": [ "node_modules/quill/dist/quill.js" ]

  5. Import it in your module: import {EditorModule} from 'primeng/editor';

    imports: [ HttpModule, FormsModule, BrowserModule, ButtonModule, TableModule, EditorModule ],

  6. Add html in any of the template <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>

  7. And in component file give some value to text1: string text2: string;

Github repo for reference Git

Upvotes: 10

Related Questions