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.


<p-editor formControlName="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.
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.

Refer to Quill documentation for more information.

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 1.0.


<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-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
        </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;
}