DEV Community

Cover image for Angular Editor

Angular Editor

PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use to contact us.
・1 min read

Angular Editor is rich text editor component based on Quill.


Refer to PrimeNG setup documentation for download and installation steps for your environment.


import {EditorModule} from 'primeng/editor';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Two-way value binding is defined with ngModel.

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>
Enter fullscreen mode Exit fullscreen mode
export class EditorDemo {

    text: string;

Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

Editor can be used in a model driven form as well.

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


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>
Enter fullscreen mode Exit fullscreen mode


Editor supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeNG Editor showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app