javascripthtmlcssangularprimeng

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:

Solution

  • 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