Input - Editor - 《PrimeNG Document》

Documentation
Source

EditorEditor is rich text editor component based on Quill.

Documentation

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>

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.
modules	any	null	Modules configuration of Editor, see here for available options.
debug	string	null	Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.
bounds	Element	document.body	DOM Element or a CSS selector for a DOM Element, within which the editor’s ui elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries..
scrollingContainer	Element	null	DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling..

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"],

Source

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="pi pi-times" (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="pi pi-times" (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;
}