q-editor with editable tokens



  • 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?



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

    https://github.com/scrumpy/tiptap


Log in to reply