q-editor with editable tokens

[bruno.ronchetti]

Hello, I m trying to put “editable” tokens into a q-editor, the idea being that the user uses the tokens as some sort of placeholder for future substitutions.

The token needs to be editable (done), removable (built-in) and i need to get a hook when the user is done editing.

My code looks like this:

addToken (name) {
  const edit = this.$refs.editor
  edit.caret.restore()
  edit.runCmd('insertHTML', `&nbsp;<div class="editor_token row inline items-center" >&nbsp;<input  contenteditable="true" onblur="blur" onclick="click"  >${name}</input>&nbsp;<i class="q-icon material-icons cursor-pointer" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">close</i></div>&nbsp;`)
  edit.focus()
},

    blur () {
      console.log('BLURRED')
    },

    click () {
      console.log('CLICKED')
    },

The events are triggered correctly, but the method-names are not resolved. I have tried all sort of things, without joy.

onclick="this.click"
onclick="this._vm.click"
onclick="this.$q.click"
onclick="this.parentNode.parentNode.click"
...

What is the correct way to do it?

[qyloxe]

It’s always better not to reinvent the wheel. If you need advanced editor interaction, maybe this one helps:

https://github.com/scrumpy/tiptap