PrimeTek UI Component Libraries
Vue3 Editor

Vue3 Editor

PrimeTek's photo
PrimeTek
·

2 min read

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.

Vue.jsvueJavaScriptWeb Development