vue-quill

A vue component wrapping the quill editor

Installation

npm install --save vue-quill

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/0.20.1/quill.snow.min.css" rel="stylesheet">

Usage

Install the vue plugin

Vue.use(require('vue-quill'))

Component

<quill :content.sync="content"></quill>

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

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

Configuration

<quill :content.sync="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...',
        },
    }
}

Custom Filter

The plugin also installs a custom filter for converting a delta object to raw html

{{{ content | quill }}}

Options

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

<quill :content.sync="content" output="html"></quill>

Custom Formats

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',
        },
    },
],

Custom Keybindings

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        
        },
    },
]

Events

This quill component dispatches events when the text or selection changes on the quill editor, you can listen for these on the parent component by declaring an event similar to this

events: {
    'selection-change'(editor, range) {
        if (range) {
            if (range.start !== range.end) {
                this.selectedText = editor.getText(range.start, range.end)
                editor.formatText(range, 'custom', 'hello world')
            }
        }
    }
},