How to customize toolbar handlers ?

Can I set handlers like this via the option editorToolbar ?

I want to add a custom module and bind to toolbar button, but this option expects the type Array, so got warning.

[lhovee]

Spent several hours struggling with how to implement a custom toolbar and sharing here in case it helps someone else.

  <!-- in the template -->
  <wysiwyg-toolbar /> <!-- created this seperate vue file -->
  <vue-editor
    id="some id"
    v-model="someEmptyDataString"
    :editorOptions="editorSettings"
  />

<script>
    import WysiwygToolbar from '../wysiwyg-toolbar.vue';

    components: 'WysiwygToolbar,
    data() {
      return {
        editorSettings: {
          modules: {
            history: { 
              delay: 2000,
              maxStack: 500,
              userOnly: true,
            },
            toolbar: {
              container: '#toolbar', // the top level div in WysiwygToolbar has an id="toolbar"
              handlers: {
                customBtn: () => { // just give your custom elements a class like "ql-customThingy" and the handlers will just work
                  console.log("undo button was clicked");
                },
                redo: () => {
                  console.log("redo button was clicked");
                },
              },
            },
          },
        },
       someEmptyDataString: 'this could be default placeholder text if you wanted.',
};
</script>

The part that took me a minute to figure out is that the toolbar component shouldn’t be nested inside the editor component.

[roberttolton]

@halws Thanks for your reply.

I think that’s definitely the right direction, only step now is to get the quill instance from vue-editor?

greetingsEn: () => {
  console.log(this.quill); // undefined
  this.quill.insertText(this.quill.getSelection(true).index, "test");
}

Edit:

Got it using $refs: this.$refs.quillEditor.quill.insertText(this.$refs.quillEditor.quill.getSelection( true ).index, '%greetings-en%');