Editor is rich text editor component based on Quill.

import { Editor } from 'primereact/editor';

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

npm install quill

Editor is used as a controlled component with value and onTextChange properties.

<Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />

When readOnly is present, the value cannot be edited.

<Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />

Toolbar is customized with the headerTemplate property. Refer to Quill documentation for available controls.

<Editor value={text} onTextChange={(e) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />

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.