4

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:

Leminur
  • 291
  • 2
  • 7
  • 22
  • Is there any error on the console? – AndrasCsanyi Sep 12 '18 at 19:48
  • @SayusiAndo No errors there on console. There were some errors related to the formGroup, but I managed to solve it with 'ngDefaultControl' – Leminur Sep 12 '18 at 20:04
  • Do reverse engineering Don't use any form, formcontrol, create only Editor and check whether it is working or not? – DirtyMind Sep 12 '18 at 22:04
  • I tried to replicate this but no luck. Uninstall primeng quell and do npm cache clean. Try to install it again and don't install install @types. – DirtyMind Sep 12 '18 at 22:51

3 Answers3

3

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

DirtyMind
  • 2,353
  • 2
  • 22
  • 43
  • Ohhh! PrimeNG is working just fine with me, it's just the Editor module that is not working, other modules like Toast or buttons work just fine. – Leminur Sep 12 '18 at 20:33
  • which version of PrimeNg you are using? Do you have any plunker or stackbliz demo ? Or git hub example. Cause in latest version of PrimeNg i am not installing quell explicitly. – DirtyMind Sep 12 '18 at 20:34
  • It's "primeng": "^6.1.2". And PrimeNG's official website shows that you need to have a dependency on Quill ( https://www.primefaces.org/primeng/#/editor ) I am not sure if the latest PrimeNG version comes with Quill, but I had to download it. And I am sorry, I don't have any of those to show you :( – Leminur Sep 12 '18 at 20:39
  • ohhh!!...Sorry my bad I Created project for Terminal instead of Editor. I will try to create another and share my findings – DirtyMind Sep 12 '18 at 20:43
  • It's okay! I am so glad that you are willing to help anyway! – Leminur Sep 12 '18 at 20:50
  • @SemIdeia Just now I implemented Editor It is working perfectly. You can clone my github code and run in your system for your reference. Make sure you are updating angular.json file correctly – DirtyMind Sep 12 '18 at 21:06
  • Also I edited the answer like How to implement Editor using primeng from scratch – DirtyMind Sep 12 '18 at 21:13
  • I still got trouble to running it in my system, can you tell me what CSS uses as properties for the editor, if you can see it, please? – Leminur Sep 12 '18 at 21:21
  • By the way, you did mean angular-cli.json as the angular.json, right? – Leminur Sep 12 '18 at 21:31
  • I am using angular 6 so in angular 6 we don't have angular-cli.json. Instead We have angular.json file. Is there any error you see ? Is there any way you can share demo code to replicate this issue? If possible make a plunker or share agithub repo As requested this is the CSS i can see:
    – DirtyMind Sep 12 '18 at 21:39
  • Can you share your package.json ? I will try to create project using those version. I feel like you are using older version of angular. – DirtyMind Sep 12 '18 at 21:55
  • 2
    Turns out it was a problem over the module, something was not letting the modules from the general module app file work, so I have created a module app file and it works now, thanks for the help anyway! I really appreciate it! – Leminur Sep 14 '18 at 13:26
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 :)

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
Kamlesh
  • 5,233
  • 39
  • 50
0

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,

Skander Jenhani
  • 75
  • 10