从指令到组件的Vuejs

Question

这可能是一个有点直截了当的问题，但我希望将旧的Vue.directives改为Vue.component，我仍然是Vue世界的新手。我似乎无法让Tinymce在一个组件中工作，我对所有建议都持开放态度。

<div id="tinymce-form">
    <textarea
            id="editor"
            rows="10"
            v-tinymce-editor="content">
            {{content}}
    </textarea>
Html: {{content}}<br />
Markdown: {{ content | markdown}}
</div>

Vue.directive('tinymce-editor',{
  twoWay: true,
  bind: function() {
    var vm = this;
    tinymce.init({
      selector: '#editor',
      setup: function(editor) {

        editor.on('init', function() {
          tinymce.get('editor').setContent(vm.value);
        });

        editor.on('keyup', function() {

          var new_value = tinymce.get('editor').getContent(vm.value);

          vm.set(new_value)
        });
      }
    });
  }


})

Vue.filter('markdown', function(value){

  return toMarkdown(value);
})


new Vue({
  el: 'body',
  data: {
    content: 'Editable Text Goes Here',
  }

})