CODEWITHSUNDEEP
vue.jsvuejs2vue-componentredactor
Clinton Green
Clinton Green

Reputation: 9977

Use redactor as a vue component

I am trying to use redactor as a vuejs 2 component but I am having lots of trouble because once loaded redactor creates a new div so I am not able to listen to a keyup event on that div. Please see the code I have below.

Vue Component

<template>
  <div>
    <textarea @keyup="internalValue" class="form-control question-create-editor" id="question_description" placeholder="Go wild with all the details here - make image upload work" rows="3">
  </div>
</template>

<script>
  export default {
    props: ['value'],
    data () {
      return {
        internalValue: this.value
      }
    },
    mounted: function(){
      $(function() {
        // $( document ).ready(function() {
          $('#question-create-form .question-create-editor').redactor({
            imageUpload:'/urlGoesHereBro/',
            plugins: ['video', 'imagemanager', 'counter', 'limiter'],
            buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
          });
          $('#question-create-form .redactor-editor').attr('v-model', 'questionDescription');
        // });
      });
    },
    watch: {
      internalValue(v){
        this.$emit($('.redactor-editor').html(), v);
      }
    }
};
</script>

Register Component

Vue.component('vueredactor', require('./components/redactor-qa.vue'));

Initialise VUE

var App = new Vue({
        el: '#app',
        data: {
          questionDescription: null
        }
    });

HTML

<div id="app">
  <vueredactor v-model="questionDescription"></vueredactor>
</div>

Upvotes: 0

Views: 1214

Answers (1)

Roy J
Roy J

Reputation: 43899

Regarding the new div, you can listen to events on it, but not by applying Vue attributes. Because you are inside the component, you can use jQuery to find elements, attach listeners to them, and any other DOM manipulations that make sense to bridge between Vue and your widget. Just confine yourself to elements inside your component.

Vue gives you a $el member (don't be fooled by the dollar sign, it's not a jQuery object) as the root element of your component instance. I don't have any experience with redactor, so I can't tell you what will work, but you might have something like

mounted: function(){
  $(function() {
      $(this.$vm).find('.question-create-editor').redactor({
        imageUpload:'/urlGoesHereBro/',
        plugins: ['video', 'imagemanager', 'counter', 'limiter'],
        buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
      });
      $(this.$vm).find('.new-redactor-div').keyup((e) => {
        this.$emit('change', e);
      });
  });
},

Upvotes: 1

Related Questions