Getting Started

HTML Editor using Vue.js and Quilljs

Vue.js

Quill

Install

You can use Yarn or NPM

$ npm install --save vue2-editor

OR

yarn add vue2-editor

Usage

// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor, Quill } from "vue2-editor";

Props

NameTypeDefaultDescription
idStringquill-containerSet the id (necessary if multiple editors in the same view)
v-modelString-Set v-model to the the content or data property you wish to bind it to
useCustomImageHandlerBooleanfalseHandle image uploading instead of using default conversion to Base64
placeholderString-Placeholder text for the editor
disabledBooleanfalseSet to true to disable editor
customModulesArray-Declare Quill modules to register
editorToolbarArray** Too long for table. See toolbar example belowUse a custom toolbar
editorOptionsObject-Offers object for merging into default config (add formats, custom Quill modules, ect)

Events

NameParametersDescription
focusquillEmitted on focus event
blurquillEmitted on blur event
selection-changerange, oldRange, sourceEmitted on Quill's selection-change event
text-changedelta, oldDelta, sourceEmitted on Quill's text-change event
imageAddedfile, Editor, cursorLocationEmitted when useCustomImageHandler is true and photo is being added to the editor