title: TinyMCE and Vuejs as a component
body: <p>I am trying to make a Vue Component for TinyMCE but I am facing some problems that I can not solve! Can anybody help me? <strong>Or maybe advise a better way to walk</strong>?</p>
  
  <p><strong>There is my Component</strong></p>
  
  <pre><code>import Vue from 'vue'
  import _ from 'lodash'
  
  export
  default {
  
    props: {
      model: {
        default () {
          return null
        }
      },
      showLeadInfo: {
        default () {
          return false
        }
      }
    },
  
    data() {
      return {
        id: 'editor_' + _.random(10000, 99999)
      }
    },
  
    watch: {
      model() {
        if (this.model == null)
          tinyMCE.activeEditor.setContent('');
      }
    },
  
    ready() {
      var vm = this;
      tinyMCE.baseURL = "/vendor/tinymce/";
      tinymce.init({
        selector: "#" + vm.id,
        theme: "modern",
        height: 200,
        plugins: [
          "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
          "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
          "save table contextmenu directionality emoticons template paste textcolor"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
        style_formats: [{
          title: 'Bold text',
          inline: 'b'
        }, {
          title: 'Red text',
          inline: 'span',
          styles: {
            color: '#ff0000'
          }
        }, {
          title: 'Red header',
          block: 'h1',
          styles: {
            color: '#ff0000'
          }
        }, {
          title: 'Example 1',
          inline: 'span',
          classes: 'example1'
        }, {
          title: 'Example 2',
          inline: 'span',
          classes: 'example2'
        }, {
          title: 'Table styles'
        }, {
          title: 'Table row 1',
          selector: 'tr',
          classes: 'tablerow1'
        }],
        setup: function(editor) {
          editor.on('keyup', function(e) {
            vm.model = editor.getContent();
          });
        }
      });
  
    },
  
    events: {
      updateTinyValue(value) {
        tinyMCE.activeEditor.setContent(value);
      }
    }
  
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;textarea :id="id" v-model="model" v-el:editor&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p><strong>PS:</strong> It is made up with Vueify so there is a template and a script tag wrapping that code.</p>
  
  <p>My biggest problem is when I try to instantiate multiple editors I cant clear the right component because of this code <code>tinyMCE.activeEditor.setContent(value)</code>... I've have tried <code>tinyMCE.get('#' + this.id).setContent()</code> but it does not work! </p>
  
  <p>Somebody have any clue?</p>
  
  <p>Other thing is about ja TinyMCE Plugins... I am using Bower + Gulp to manage my assets! I would like to put all the plugins on my gulpfile (I am using Laravel 5)... Right now the TinyMCE plugins are been loaded one by one and it takes a lot of time!</p>
  
  <p>Thanks in advance!</p>