Cannot customize PrimeNG Quill Editor in Angular

Question

I am using PrimeNG Editor (based on Quill in an Angular 7 project and I want to customize the toolbar. Although I have tried some of the configuration options on HTML and JavaScript side, the only thing I managed to update is placeholder property via HTML side. Here is my approach (I defined Editor as a custom control):

#FormComponent.ts:

public controlDescription = new ControlEditor({
    key: 'Description',
    label: 'Description',
    required: true
});

this.controls = [this.controlDescription, ... ];

#FormComponent.html:

<div comp-dynamic-control [form]="form" [control]="controlDescription"></div>

#ControlEditor.html:

<p-editor [formControlName]="control.key" placeholder='Compose text...'></p-editor>

Please note that I also tried to use Editor directly (without our Custom Editor) using the following code in FormComponent.html but there is no editor seems on the page despite adding import {EditorModule} from 'primeng/editor'; to the ControlEditor.ts file. ANy idea?

<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>

Thanks, but I already import this to the app.module and my component.ts file (FormComponent.ts). Any idea? — Jack
– Jack, Commented Feb 13, 2019 at 7:24

Maurice · Accepted Answer · 2020-11-07 22:16:20Z

11

I'm using Angular 9 and for me the customization only worked when i provided the formats property with a string array of all the desired formats (buttons) and next to that i needed to add the buttons in the html page as well. The buttons needed to be enclosed within p-header tags and the p-header tags needed to be between the p-editor tags like so:

<p-editor [(ngModel)]="value" [style]="{'height':'100px'}" formats="formats">
    <p-header>
       <span class="ql-formats">
        <button class="ql-bold" aria-label="Bold"></button>
        <button class="ql-italic" aria-label="Italic"></button>
       </span>
    </p-header>
</p-editor>

The bold and italic buttons will only appear when i also define them in a string array in the typescript page like so:

formats: string[] = ['bold', 'italic'];

Here are all the other options: https://quilljs.com/docs/formats/

don't forget to add formats="formats" to the first p-editor tag

answered Nov 7, 2020 at 22:16

Maurice

7,47812 gold badges61 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prashant Agrawal Over a year ago

I am getting a similar issue in angular 9 stackoverflow.com/questions/61889006/…, can you please look?

TheParam · Accepted Answer · 2019-02-13 07:15:19Z

-1

You need to import the Editor module in your Module level, not a component level ts file.

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import {EditorModule} from 'primeng/editor';


@NgModule({
  imports:      [ BrowserModule, FormsModule, EditorModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Hope this will help!

answered Feb 13, 2019 at 7:15

TheParam

10.6k4 gold badges43 silver badges54 bronze badges

2 Comments

Jack Over a year ago

Thanks a lot, but I already import this to the app.module and my component.ts file (FormComponent.ts). I also tried to add as shown below but it does not make any sense as it had already been added to the shared module). Any idea?

TheParam Over a year ago

please do not import multiple times. remove from the component.ts file

Collectives™ on Stack Overflow

Cannot customize PrimeNG Quill Editor in Angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related