surmon-china / vue-quill-editor

@quilljs editor component for @vuejs(2)
https://github.surmon.me/vue-quill-editor
MIT License
7.38k stars 1.03k forks source link

Intergration with the keyboard module? #443

Open ghost opened 3 years ago

ghost commented 3 years ago

I'm want to call a function from Vue's "methods" when an enter key is pressed within the scope of the Quill editor. I'm using Vue & Nuxt + SSR

editorOption: {
        theme: "snow",
        modules: {
          keyboard: {
            bindings: {
              tab: false,
              handleEnter: {
                key: 13,
                handler() {
                    console.log('enter works') // works
                    this.myVueMethod()           // ... is not a function
                },
              },
            },
          },

Although binding the enter key correctly, it can't call vue methods or read data from "data". Could you please clarify how to use the keyboard module with vue data?

giliomeejg commented 3 years ago

Do something like this:

data: function () {
    let self = this;
    return {
        editorOption: {
          keyboard: {
            bindings: {
              tab: false,
              handleEnter: {
                key: 13,
                handler() {
                  console.log("enter works");
                  // reference self.theFunctionYouWantToCall()
                },
              },
            },
        }
    }