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
A model can be bound using the standard v-model directive.
<Editor v-model="value" editorStyle="height: 320px" />
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>
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<template>
<div class="card">
<form @submit="onSubmit">
<Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
<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>
<div class="flex flex-wrap justify-content-between align-items-center gap-3 mt-3">
<small class="p-error" id="editor-error">{{ errorMessage || ' ' }}</small>
<Button type="submit" label="Submit" />
</div>
</form>
<Toast />
</div>
</template>
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.