Editor Editor is rich text editor component based on Quill.

Default

Value: {{text1||'empty'}}


Custom Toolbar

Value: {{text2||'empty'}}

Import


import {Editor} from 'primeng/primeng';
import {Header} from 'primeng/primeng';

Getting Started

Editor component is defined using p-editor element and requires a value to bind.


<p-editor [(value)]="text" style="height:320px"></p-editor>


export class EditorDemo {
    
    text: string;
        
}

Toolbar

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


<p-editor [(value)]="text2" style="height:320px">
    <header>
        <span class="ql-format-group">
            <span title="Bold" class="ql-format-button ql-bold"></span>
            <span class="ql-format-separator"></span>
            <span title="Italic" class="ql-format-button ql-italic"></span>
            <span class="ql-format-separator"></span>
            <span title="Underline" class="ql-format-button ql-underline"></span>
            <span class="ql-format-separator"></span>
            <span title="Strikethrough" class="ql-format-button ql-strike"></span>
        </span>
    </header>
</p-editor>

Attributes

Name Type Default Description
value string null Value of the component.
style string null Inline style of the container.
styleClass string null Style class of the container.

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.

Styling

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

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

Dependencies

Quill Editor.


<h3 class="first">Default</h3>
<p-editor [(value)]="text1" style="height:320px"></p-editor>
<p>Value: {{text1||'empty'}}</p>

<button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>

<hr style="border-top:0px;border-color:#dde3e6">

<h3>Custom Toolbar</h3>
<p-editor [(value)]="text2" style="height:320px">
    <header>
        <span class="ql-format-group">
            <span title="Bold" class="ql-format-button ql-bold"></span>
            <span class="ql-format-separator"></span>
            <span title="Italic" class="ql-format-button ql-italic"></span>
            <span class="ql-format-separator"></span>
            <span title="Underline" class="ql-format-button ql-underline"></span>
            <span class="ql-format-separator"></span>
            <span title="Strikethrough" class="ql-format-button ql-strike"></span>
        </span>
    </header>
</p-editor>
<p>Value: {{text2||'empty'}}</p>

<button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>


export class EditorDemo {

    text1: string = '
Hello World!
PrimeNG Editor Rocks

'; text2: string; }