Nicer Package Manager

    vue-quill

    1.5.1 • Public • Published

    vue-quill

    npm version

    A vue component wrapping the quill editor

    Installation

    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">

    Vue 1

    For Vue 1 components use v0.1.5 or earlier

    Usage

    Install the vue plugin

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

    Component

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

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

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

    Configuration

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

    Options

    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>

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

    Install

    npm i vue-quill

    DownloadsWeekly Downloads

    905

    Version

    1.5.1

    License

    ISC

    Unpacked Size

    20.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • brockreece