How to get Redactor wysiwyg working with vue.js ( without jQuery )

Question

According to the website ( https://imperavi.com/redactor/ ) , the current version of redactor is jquery free. ( quote from the page "jQuery Free No dependencies, no problems".

I can get the editor going in vue.js , but I am unsure how to bind the data through events ( as it doesn't appear you can bind directly ) .

Getting ideas from https://imperavi.com/redactor/docs/callbacks/source/

I have tried I n the script section of my page )

window.onload = function () {
  window.Redactor('#redactor1', {
    callbacks: {
      source: {
        changed: function (html) {
          alert('aa')
          return html
        }
      },
      syncBefore: function (html) {
        alert('bb')
        return html
      }
    }
  })
  alert("It's loaded!")
}

But it doesn't seem to trigger the events - except alert("it's loaded") works fine. No errors either.

Any ideas what I am doing wrong?

Answer 1

You can use inspiration from their Vue plugin: https://github.com/imperavi/vue-redactor

watch: {
    value(newValue, oldValue)
    {
        if (!this.redactor.editor.isFocus()) this.redactor.source.setCode(newValue)
    }
},