Vue3 Editor

Vue Editor is rich text editor component based on Quill. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Editor from 'primevue/editor';

Getting Started

A model can be bound using the standard v-model directive.

<Editor v-model="value" editorStyle="height: 320px"/>

Toolbar

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 #toolbar>
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
        </span>
    </template>
</Editor>

Theming

Editor supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Editor showcase for demos and documentation.