Angular Editor is rich text editor component based on Quill.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {EditorModule} from 'primeng/editor';
Getting Started
Two-way value binding is defined with ngModel.
<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>
export class EditorDemo {
text: string;
}
Model Driven Forms
Editor can be used in a model driven form as well.
<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>
Toolbar
Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls.
<p-editor [(ngModel)]="text2" [style]="{'height':'320px'}">
<ng-template pTemplate="header">
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
</ng-template>
</p-editor>
Theming
Editor supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Editor showcase for demos and documentation.