Implement in a Vue project

[marcioelias]

Any chances to integrate theses classes with this package: https://github.com/surmon-china/vue-quill-editor

[marcioelias]

Answering my own question, for those that my need this same solution...

Here is my Editor markup using the component for Vuejs <quill-editor ref="emailMessageEditor" v-model="emailAction.emailMessage"></quill-editor>

on mounted() hook of the Vuejs component, I call a method to create the new select on my editor mounted() { this.addCustomSelectToEditor() } and here is the code of the method addCustomSelectToEditor()

addCustomSelectToEditor() {
    const quill = this.$refs.emailMessageEditor.quill

    const dropDownItems = {
        'Mike Smith': '[email protected]',
        'Jonathan Dyke': '[email protected]',
        'Max Anderson': '[email protected]'
    }

    const myDropDown = new QuillToolbarDropDown({
        label: "Email Addresses",
        rememberSelection: false
    })

    myDropDown.setItems(dropDownItems)

    myDropDown.onSelect = function(label, value, quill) {
        // Do whatever you want with the new dropdown selection here

        // For example, insert the value of the dropdown selection:
        const { index, length } = quill.selection.savedRange
        quill.deleteText(index, length)
        quill.insertText(index, value)
        quill.setSelection(index + value.length)
    }

    myDropDown.attach(quill)
}

[lincolnlemos]

How did you import the script at your file @marcioelias ?

Also, did you figure out any way to have this as a plugin so it can be global?

[abdallahboucedraya]

I get an error: 'QuillToolbarDropDown' is not defined.eslint

const myDropDown = new QuillToolbarDropDown({
        label: "Email Addresses",
        rememberSelection: false
    })

@lincolnlemos @marcioelias @T-vK