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.
Also, core styles of the Quill should be imported in the project's root style file.
npm install quill
// import Quill styles in styles.scss
@import "../node_modules/quill/dist/quill.core.css";
@import "../node_modules/quill/dist/quill.snow.css";
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' }" />
When readonly is present, the value cannot be edited.
<p-editor [(ngModel)]="text" [readonly]="true" [style]="{ height: '320px' }" />
Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-editor formControlName="text" [style]="{ height: '320px' }" />
</form>
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' }">
<ng-template pTemplate="header">
<span class="ql-formats">
<button type="button" class="ql-bold" aria-label="Bold"></button>
<button type="button" class="ql-italic" aria-label="Italic"></button>
<button type="button" class="ql-underline" aria-label="Underline"></button>
</span>
</ng-template>
</p-editor>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-editor-container | Container element |
| p-editor-toolbar | Toolbar of the editor |
| p-editor-content | Editable area |
Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for dropdowns in the toolbar that may be overcome with a custom toolbar.
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.