I have added the jquery redactor plugin in a vue component. The plugin is working fine but I need to access the html so I can see it in Vue.
I have tried everything I can think of, methods, computed properties but I can't find a way. It's particularly tricky because Redactor adds new html into the dom, and I need to get the data from the added html.
Currently I am getting this error, this.$emit is not a function
. I need to get the html value of .redactor-editor
into the prop so it will be available in the vue data. The var textContent
prints out correctly in console but I can't get that to show in the prop
. Any help is greatly appreciated.
Component
<template>
<div>
<textarea 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: ['redactorValue'],
mounted: function(){
$('#question-create-form .question-create-editor').redactor({
imageUpload:'/urlGoesHereBro/',
plugins: ['video', 'imagemanager', 'counter', 'limiter'],
buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
});
},
computed: {
redactorValue: function(){
$('#question-create-form .redactor-editor').on('keyup', function(){
var textContent = $('#question-create-form .redactor-editor').html();
console.log( 'textContent = ' + textContent );
this.$emit('redactorValue', textContent);
});
}
}
};
HTML
<vueredactor></vueredactor>
The this.$emit is not a function
issue is because this
is pointing to the window
.
Also I moved the keyup
definition into mounted
.
export default {
data(){
return {
redactorValue: null
}
},
mounted: 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').on('keyup', function(){
this.redactorValue = $('#question-create-form .redactor-editor').html();
}.bind(this));
}
};