Editor

Editor is rich text editor component based on Quill.

A model can be bound using the standard ngModel directive.

Editor uses Quill editor underneath so it needs to be installed as a dependency.

A model can be bound using the standard ngModel directive.

basic-demo

When readonly is present, the value cannot be edited.

readonly-demo

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.

custom-toolbar-demo
template-driven-forms-demo

Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

reactive-forms-demo

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.

ON THIS PAGE
PrimeBlocks
490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.
Learn More