Editor is rich text editor component based on Quill.
import { EditorModule } from 'primeng/editor';
Editor uses Quill editor underneath so it needs to be installed as a dependency.
npm install quill
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)]="text" [style]="{ height: '320px' }"></p-editor>
| Name | Element |
|---|---|
| p-editor-container | Container element |
| p-editor-toolbar | Toolbar of the editor |
| p-editor-content | Editable area |
API defines helper props, events and others for the PrimeNG Editor module.
Editor groups a collection of contents in tabs.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onInit | event : EditorInitEvent | Callback to invoke when the quill modules are loaded. | |
| onTextChange | event : EditorTextChangeEvent | Callback to invoke when text of editor changes. | |
| onSelectionChange | event : EditorSelectionChangeEvent | Callback to invoke when selection of the text changes. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom text change event.
Custom selection change event.
Custom load event.