Editor

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 || '&nbsp;' }}</small>
                <Button type="submit" label="Submit" />
            </div>
        </form>
        <Toast />
    </div>
</template>

Screen Reader

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.