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

Two-way value binding is defined with ngModel.


<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>


export class EditorDemo {
    
    text: string;
        
}

Model Driven Forms

Editor can be used in a model driven form as well by defining ngFormControl or ngControl.


<p-editor ngControl="description" [style]="{'height':'320px'}"></p-editor>

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 [(ngModel)]="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
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 [(ngModel)]="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 [(ngModel)]="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 = '<div>Hello World!</div><div>PrimeNG <b>Editor</b> Rocks</div><div><br></div>';
    
    text2: string;
}