Editor

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.