DEV Community

loading...
Cover image for Angular Editor

Angular Editor

primetek profile image PrimeTek ・1 min read

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';
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

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

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.

Discussion (0)

pic
Editor guide