Editor is rich text editor component based on Quill.
import Editor from 'primevue/editor';
Editor uses Quill editor underneath so it needs to be installed as a dependency.
npm install quill
Editor is used with the v-model property for two-way value binding.
<Editor v-model="value" editorStyle="height: 320px" />
Editor integrates seamlessly with the PrimeVue Forms library.
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<Editor name="content" editorStyle="height: 320px" />
<Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
When readonly is present, the value cannot be edited.
<Editor v-model="value" editorStyle="height: 320px" readonly />
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.
<Editor v-model="value" editorStyle="height: 320px">
<template v-slot:toolbar>
<span class="ql-formats">
<button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
<button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
<button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
</span>
</template>
</Editor>
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.