Editor

Editor is rich text editor component based on Quill.


import { EditorModule } from 'primeng/editor';

Editor uses Quill editor underneath so it needs to be installed as a dependency.

Also, core styles of the Quill should be imported in the project's root style file.


npm install quill


// import Quill styles in styles.scss
@import "../node_modules/quill/dist/quill.core.css";
@import "../node_modules/quill/dist/quill.snow.css";

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)]="text" [style]="{ height: '320px' }" />

When readonly is present, the value cannot be edited.


<p-editor [(ngModel)]="text" [readonly]="true" [style]="{ height: '320px' }" />

Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.


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

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)]="text" [style]="{ height: '320px' }">
    <ng-template pTemplate="header">
        <span class="ql-formats">
            <button type="button" class="ql-bold" aria-label="Bold"></button>
            <button type="button" class="ql-italic" aria-label="Italic"></button>
            <button type="button" class="ql-underline" aria-label="Underline"></button>
        </span>
    </ng-template>
</p-editor>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-editor-containerContainer element
p-editor-toolbarToolbar of the editor
p-editor-contentEditable area

Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for dropdowns in the toolbar that may be overcome with a custom toolbar.