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.