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.


npm install quill

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' }"></p-editor>

When readonly is present, the value cannot be edited.

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

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.

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
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.