Quill.vue

<template>
    <div>
        <!-- HACK: v-el to ref -->
        <div ref="toolbar" class="">
        <!-- HACK: remove slot  --> 
        </div>
        <!-- HACK: v-el to ref -->
        <div class="ui attached segment" ref="quill" @click.prevent="focusEditor"></div>
    </div>
</template>

<script>
    const Quill = require('quill')
    export default {
        props: {
            content: {},

            author: {},

            formats: {
                type: Array,
                default () {
                    return []
                },
            },

            keyBindings: {
                type: Array,
                default () {
                    return []
                },
            },

            output: {
                default: 'delta'
            },

            keyup: {
                default: null
            },

            config: {
                default () {
                    return {
                        modules: {

                            toolbar: {
                                //HACK: force loading of toolbar options
                                container: [
                                    [{
                                        'font': []
                                    }],
                                    [{
                                        'header': [1, 2, 3, 4, 5, 6, false]
                                    }],
                                    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                                    ['blockquote', 'code-block'],
                                    // custom button values
                                    [{
                                        'list': 'ordered'
                                    }, {
                                        'list': 'bullet'
                                    }],
                                    [{
                                        'script': 'sub'
                                    }, {
                                        'script': 'super'
                                    }], // superscript/subscript
                                    [{
                                        'indent': '-1'
                                    }, {
                                        'indent': '+1'
                                    }], // outdent/indent
                                    [{
                                        'color': []
                                    }, {
                                        'background': []
                                    }], // dropdown with defaults from theme

                                    [{
                                        'align': []
                                    }],

                                    ['clean'] // remove formatting button
                                ]
                            }
                        },
                        theme: 'snow',
                    }
                },
            },
        },

        data() {
            return {
                editor: {},

            }
        },
    //HACK: changed to mounted. maybe a Vue.nextTick would solve the slot/dom loading issues
        mounted() {
            
            this.editor = new Quill(this.$refs.quill, this.config)
                //HACK: addMOdule not supported in Quill 1
                //this.editor.addModule('toolbar', this.$refs.toolbar)

            this.formats.map((format) => {
                this.editor.addFormat(format.name, format.options)
            })

            if (this.output != 'delta') {
                this.editor.setHTML(this.content);
            } else {
                this.editor.setContents(this.content);
            }

            this.editor.on('text-change', (delta, source) => {
                //HACK: dispatch not supported in Vue 2
                //this.$dispatch('text-change', this.editor, delta, source)
                this.content = this.output != 'delta' ? this.editor.getHTML() : this.editor.getContents()
            })

            this.editor.on('selection-change', (range) => {
                //HACK: dispatch not supported in Vue 2
                //this.$dispatch('selection-change', this.editor, range)
            })

            if (typeof this.author !== 'undefined') {
                this.editor.addModule('authorship', {
                    authorId: this.author,
                })
            }

            if (this.keyBindings.length) {
                const keyboard = this.editor.getModule('keyboard')

                this.keyBindings.map((binding) => {
                    keyboard.addHotkey({
                        key: binding.key,
                        metaKey: true
                    }, binding.method.bind(this))
                })
            }
        },

        events: {
            'set-content': function(content) {
                this.editor.setContents(content)
            },

            'set-html': function(html) {
                this.editor.setHTML(html)
            },

            'focus-editor': function() {
                this.focusEditor()
            }
        },

        methods: {
            focusEditor(e) {

                if (e && e.srcElement) {
                    let classList = e.srcElement.classList,
                        isSegment = false;

                    classList.forEach((className) => {
                        if (className === 'segment') {
                            isSegment = true
                            return
                        }
                    })

                    if (!isSegment) return;
                }

                this.editor.focus()

                this.editor.setSelection(this.editor.getLength() - 1, this.editor.getLength())


            }

        },
    }
</script>