Editor

Editor is rich text editor component based on Quill.

Default

Customized

Import via Module


import { Editor } from 'primereact/editor';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/editor/editor.min.js"></script>

Getting Started

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


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

Toolbar

Editor provides a default toolbar with common options, to customize it define your elements with the headerTemplate. Refer to Quill documentation for available controls.


const header = (
    <span className="ql-formats">
        <button className="ql-bold" aria-label="Bold"></button>
        <button className="ql-italic" aria-label="Italic"></button>
        <button className="ql-underline" aria-label="Underline"></button>
    </span>
);

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

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	string	null	Value of the content.
style	object	null	Inline style of the container.
className	string	null	Style class of the container.
placeholder	string	null	Placeholder text to show when editor is empty.
readOnly	boolean	false	Whether to instantiate the editor to read-only mode.
modules	object	null	Modules configuration, see here for available options.
formats	string[]	null	Whitelist of formats to display, see here for available options.
headerTemplate	any	null	Style and modules of the toolbar.
maxLength	number	null	Maximum number of characters the editor will accept.

Events

Name	Parameters	Description
onTextChange	event.delta: Representation of the change. event.source: Source of change. Will be either "user" or "api". event.htmlValue: Current value as html. event.textValue: Current value as text.	Callback to invoke when text of editor changes.
onSelectionChange	event.range: Object with index and length keys indicating where the selection exists. event.oldRange: Object with index and length keys indicating where the previous selection was. event.source: Source of change. Will be either "user" or "api".	Callback to invoke when selected text of editor changes.
onLoad	quill: Quill instance	Callback to invoke when the quill modules are loaded.