PrimeTek UI Component Libraries
React Editor

React Editor

PrimeTek's photo
PrimeTek
·

2 min read

React Editor is rich text editor component based on Quill.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Editor } from 'primereact/editor';

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

Theming

Editor supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Editor showcase for demos and documentation.

ReactJavaScriptWeb Development