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' }} />
         
Compatibility with popular React form libraries.

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" />
         

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" />
         

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.

Visit the API documentation for detailed information about all the properties, events and methods of the component.