Editor Editor is rich text editor component based on Quill.

Default

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

Custom Toolbar

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

Import


import {EditorModule} from 'primeng/editor';

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'}">
    <p-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>
    </p-header>
</p-editor>

Properties

Name	Type	Default	Description
style	string	null	Inline style of the container.
styleClass	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.
formats	string[]	null	Whitelist of formats to display, see here for available options.

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 the text of the editor is changed by the user.
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.
onInit	event.editor: Quill editor instance. 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 after editor is initialized.

Refer to Quill documentation for more information.

Methods

Name	Parameters	Description
getQuill	-	Returns the underlying quill instance.

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.

Resources of quill needs to be added to your application. Example setup with CLI is as follows;


npm install quill --save

Add Quill to scripts in angular-cli.json


"scripts": [... "../node_modules/quill/dist/quill.js"],

Add Quill css to styles in angular-cli.json


"styles": [ ... "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css"],

View on GitHub


<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'}">
    <p-header>
        <span class="ql-formats">
            <button class="ql-bold" aria-label="Bold"></button>
            <button class="ql-italic" aria-label="Italic"></button>
            <button class="ql-underline" aria-label="Underline"></button>
        </span>
    </p-header>
</p-editor>
<p>Value: {{text2||'empty'}}</p>

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


import {Component} from '@angular/core';

@Component({
    templateUrl: './editordemo.html'
})
export class EditorDemo {

    text1: string = '<div>Hello World!</div><div>PrimeNG <b>Editor</b> Rocks</div><div><br></div>';
    
    text2: string;
}