Как показать содержимое внутри vue js текстового редактора? - PullRequest
Новая
       11

Как показать содержимое внутри vue js текстового редактора?

0 голосов
/ 03 апреля 2020

Я работаю на веб-сайте laravel, где у меня есть расширенный текстовый редактор, созданный с Vue. Js. Я нахожусь на странице редактирования и хочу показать ранее сохраненный контент в редакторе форматированного текста, чтобы внести некоторые изменения. На этой странице я получил PHP laravel переменную {{cms->p_content}}, которая имеет значение, которое хранилось в базе данных, как показать значение этой переменной в редакторе форматированного текста?.

My код 

<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: ''
    }
  })
})
...