如何在vue js RTF编辑器中显示内容?

时间:2020-04-03 08:04:17

标签: javascript laravel vue.js richtextbox

我正在laravel网站上工作,在那里我具有使用Vue.Js构建的富文本编辑器。我在编辑页面上,想在RTF编辑器中显示以前保存的内容以进行一些编辑。在此页面上,我得到了一个PHP laravel变量{{cms->p_content}},该变量具有存储在数据库中的值,如何在RTF编辑器中显示此变量的值?。

我的代码

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

0 个答案:

没有答案