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:

https://github.com/primefaces/primeng/issues/807
PrimeNg Error: Quill is not defined
http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/

回答1:

Just now I created a project for PrimeNg Editor

Created new angular project with latest Version 6
npm install primeng --save latest > 6.0.0
npm install quill --save
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" ]
Import it in your module: import {EditorModule} from 'primeng/editor';

imports: [ HttpModule, FormsModule, BrowserModule, ButtonModule, TableModule, EditorModule ],
Add html in any of the template <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>
And in component file give some value to text1: string text2: string;

Github repo for reference Git

回答2:

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 :)

来源：https://stackoverflow.com/questions/52302269/primeng-editor-is-not-showing-up-angular

标签

javascript

html

css

angular

primeng