Package Exports

vue-quill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-quill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-quill

A vue component wrapping the quill editor

Installation

npm install --save https://github.com/CroudSupport/vue-quill.git

Usage

Install the vue plugin

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

Then you can use the quill component and custom filter for converting delta object to raw html

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