tiny.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div><textarea class="uk-width-1-1" v-model="model.rte_content" ref="mytextarea" id="mytextarea">Hello, World!</textarea></div>`,
  methods: {
    initWith() {
      return {
        plugin: 'atlas_rte',
        rte_content: 'Hello world!'
      }
    },
    pluginCreated() {
      this.$sb.getScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/tinymce.min.js', () => {
        this.tinyLoaded = true;
        console.log('plugin:created');
        tinymce.init({
          selector: '#mytextarea',
          init_instance_callback: (editor) => {
            editor.on('input change undo redo setcontent', () => {
              this.model.rte_content = editor.getContent()
            })
          },
          menubar: false,
          style_formats: [{ title: 'Block', items: [{ title: 'Paragraph', format: 'p' }, { title: 'Header 1', format: 'h1' }, { title: 'Header 2', format: 'h2' }, { title: 'Header 3', format: 'h3' }, { title: 'Header 4', format: 'h4' }, { title: 'Header 5', format: 'h5' }, { title: 'Header 6', format: 'h6' }, { title: 'Blockquote', format: 'blockquote' }] }, { title: 'Inline', items: [{ title: 'Bold', icon: 'bold', format: 'bold' }, { title: 'Italic', icon: 'italic', format: 'italic' }] }, { title: 'Alignment', items: [{ title: 'Text Right', icon: 'alignright', selector: 'p, div, blockquote', classes: 'text-right' }, { title: 'Text Center', icon: 'aligncenter', selector: 'p, div, blockquote', classes: 'text-center' }, { title: 'Text Left', icon: 'alignleft', selector: 'p, div, blockquote', classes: 'text-left' }] }, { title: 'Colours', items: [{ title: 'Text Pink Dark', selector: '*', classes: 'text-pink-dark'} ,{ title: 'Text Pink', selector: '*', classes: 'text-pink'} ,{ title: 'Text White', selector: '*', classes: 'text-white' }] }]
        });
      })
    },
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}