CODEWITHSUNDEEP
angulartypescriptprimeng
Jack
Jack

Reputation: 1

Cannot customize PrimeNG Quill Editor in Angular

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>

Upvotes: 2

Views: 5205

Answers (2)

Maurice
Maurice

Reputation: 7371

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

Upvotes: 10

TheParam
TheParam

Reputation: 10541

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!

Upvotes: -1

Related Questions