📄 primeng/editor

File: editor.md | Updated: 11/15/2025

Source: https://primeng.org/editor

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

Editor

Editor is rich text editor component based on Quill.

Import #

import { EditorModule } from 'primeng/editor';

Quill #

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

npm install quill

Basic #

A model can be bound using the standard ngModel directive.

HeadingSubheadingNormalSans SerifSerifMonospacecenterrightjustify

<p-editor [(ngModel)]="text" [style]="{ height: '320px' }" />

ReadOnly #

When readonly is present, the value cannot be edited.

HeadingSubheadingNormalSans SerifSerifMonospacecenterrightjustify

<p-editor [(ngModel)]="text" [readonly]="true" [style]="{ height: '320px' }" />

Template #

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 #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>

Forms #

Template Driven

HeadingSubheadingNormalSans SerifSerifMonospacecenterrightjustify

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-editor #content="ngModel" [(ngModel)]="text" [invalid]="content.invalid && (content.touched || exampleForm.submitted)" name="content" [style]="{ height: '320px' }" required /> @if (content.invalid && (content.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Content is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Reactive Forms

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

HeadingSubheadingNormalSans SerifSerifMonospacecenterrightjustify

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-editor formControlName="text" [invalid]="isInvalid('text')" [style]="{ height: '320px' }" /> @if (isInvalid('text')) { <p-message severity="error" size="small" variant="simple">Content is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Accessibility #

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.

  • Import

  • Quill

  • Basic

  • ReadOnly

  • Template

  • Forms

    • Template Driven

    • Reactive Forms

  • Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek