0

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: ''
    }
  })
})
Mohit Chandel
  • 1,838
  • 10
  • 31

0 Answers0