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>
When readonly is present, the value cannot be edited.
Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
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.
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.
| 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 p 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.. |
| 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. |
| Name | Parameters | Description |
|---|---|---|
| getQuill | - | Returns the underlying quill instance. |
| Name | Parameters |
|---|---|
| header | - |