I am working on a laravel website where I have a rich text editor built with Vue.Js. I am on the edit page and want to show the previously saved content inside the rich text editor to make some edits. On this page, I got a PHP laravel variable {{cms->p_content}}
which has the value that was stored in the database, how to show the value of this variable inside the rich text editor?.
My code
<fieldset class="form-group">
<textarea
name = "p_content"
class="form-control"
id="editor"
rows="10"
placeholder="Content"
v-tinymce-editor="content">
</textarea>
</fieldset>
VueJs
$(function() {
// tinymce directive
Vue.directive('tinymce-editor',{
twoWay: true,
bind: function() {
var self = this;
tinymce.init({
selector: '#editor',
setup: function(editor) {
// init tinymce
editor.on('init', function() {
tinymce.get('editor').setContent(self.value);
});
// when typing keyup event
editor.on('keyup', function() {
// get new value
var new_value = tinymce.get('editor').getContent(self.value);
// set model value
self.set(new_value)
});
}
});
},
update: function(newVal, oldVal) {
// set val and trigger event
$(this.el).val(newVal).trigger('keyup');
}
})
new Vue({
el: '#tinymce-form',
data: {
content: ''
}
})
})