vue tinymce test

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.13/vue.min.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="app">
  <h3>This is the tinyMCE editor</h3>
  <textarea id="editor" v-editor :body="body"></textarea>
  
  <hr>
  <p>This input field is properly binded</p>
  <input v-model="body">
  
  <hr>
  <pre>data binding: {{ body }} </pre>
</div>

JavaScript

tinymce.init({
    selector:'#editor',
});


Vue.directive('editor', {
	twoWay: true,
  params: ['body'],
  
  bind: function () {
    tinyMCE.get('editor').setContent(this.params.body);
    tinyMCE.get('editor').on('change', function(e) {
      alert("changed");
    });
  },
  update: function (value) {
  	$(this.el).val(value).trigger('change')
  },
});

var editor = new Vue({
  el: '#app',
  data: {
    body: 'Post body'
  }
})