A vue component wrapping the quill editor

You can view a basic demo of this component in this CodeSandbox

npm install --save vue-quill -or- yarn add vue-quill 

You will also need to include the following css file in your project

<link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">

For Vue 1 components use v0.1.5 or earlier

Install the vue plugin

import Vue from 'vue' import VueQuill from 'vue-quill' Vue.use(VueQuill)

<quill v-model="content"></quill>

You may want to initialize the synced variable as a valid delta object too

data() { return { content: { ops: [], }, } }

<quill v-model="content" :config="config"></quill>

You can also provide a config object as described in http://quilljs.com/docs/configuration/

data() { return { content: { ops: [], }, config: { readOnly: true, placeholder: 'Compose an epic...', }, } }

By default, the component outputs the content as a delta object, you can pass in a prop to return raw html

<quill v-model="content" output="html"></quill>

To add custom formats to the editor, you can pass an array of formats as a prop. The array should be in the following format

formats: [ { name: 'custom', options: { attribute: 'custom', }, }, ],

You can add custom keybindings by passing through an array in the props, the array should be in the following format

keyBindings: [ { key: 's', method: function(range) { this.$dispatch('save', this.editor, range) return false }, }, ]

This quill component emits events when the text or selection changes on the quill editor

<quill v-model="content" @selection-change="selectionChange"></quill> <script> methods: { selectionChange(editor, range) { if (range) { if (range.start !== range.end) { this.selectedText = editor.getText(range.start, range.end) editor.formatText(range, 'custom', 'hello world') } } }, },