Source: https://primereact.org/editor/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

Editor

Editor is rich text editor component based on Quill.

Import#

---

import { Editor } from 'primereact/editor';
         

Copy

Quill#

---

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

npm install quill
         

Copy

Basic#

---

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

HeadingSubheadingNormal

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

Copy

ReadOnly#

---

When readOnly is present, the value cannot be edited.

HeadingSubheadingNormal

Always bet on Prime!

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

Copy

Template#

---

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

Hello World!

PrimeReact Editor Rocks

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

Copy

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.

• Import

• Quill

• Basic

• ReadOnly

• Template

• Accessibility

PrimeReact 10.9.7 by PrimeTek