Editor

Editor is rich text editor component based on Quill.

Import#


import { Editor } from 'primereact/editor';

Quill#

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


npm install quill

Basic#

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


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

ReadOnly#

When readOnly is present, the value cannot be edited.


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

Template#

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' }} />

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<Toast ref={toast} />
<Editor
    id="blog"
    name="blog"
    value={formik.values.blog}
    headerTemplate={header}
    onTextChange={(e) => {
        formik.setFieldValue('blog', e.textValue);
    }}
    style={{ height: '320px' }}
/>
{getFormErrorMessage('blog')}
<Button type="submit" label="Save" />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
<Controller
    name="blog"
    control={control}
    rules={{ required: 'Content is required.' }}
    render={({ field }) => <Editor id={field.name} name="blog" value={field.value} headerTemplate={header} onTextChange={(e) => field.onChange(e.textValue)} style={{ height: '320px' }} />}
/
{getFormErrorMessage('blog')}
<Button type="submit" label="Save" />

Style#

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

Name	Element
p-editor-container	Container element
p-editor-toolbar	Toolbar of the editor
p-editor-content	Editable area

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

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.