richtext.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div><textarea v-model="model.content" id="mytextarea"></textarea></div>
  `,
    mounted () {

      let style = document.createElement('style')
      style.type = "text/css"
      style.appendChild(document.createTextNode(`
      
      
      [aria-label="Insert link"].mce-floatpanel {
        width: 96% !important;
        left: 2% !important;
      }
      [aria-label="Insert link"].mce-floatpanel .mce-abs-layout,
      [aria-label="Insert link"].mce-floatpanel .mce-abs-layout-item,
      [aria-label="Insert link"].mce-floatpanel .mce-container-body,
      [aria-label="Insert link"].mce-floatpanel .mce-abs-layout-item
      {
        max-width: 100%;
      }
      
      [aria-label="Insert link"].mce-floatpanel .mce-container-body {
        position: relative;
      }
      
      `))
      this.styleNode = style.childNodes[0] // a reference I store in the data hash
      document.head.appendChild(style)
    },
  methods: {
    initWith() {
      return {
        plugin: 'wysiwyg-tinymce',
        content: ''
      }
    },
    pluginCreated() {
      this.$sb.getScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/tinymce.min.js', () => {
        tinymce.init({
          selector: '#mytextarea',
          init_instance_callback: (editor) => {
            editor.on('input change undo redo setcontent', () => {
              this.model.content = editor.getContent()
            })
          },
          width: 'calc(100% - 2px)',
          height: 230,
          plugins: 'fullscreen link lists code visualblocks paste',
          paste_as_text: true,
          paste_word_valid_elements: "",
          paste_webkit_styles: "",
          paste_retain_style_properties: "",
          paste_convert_word_fake_lists: false,
          paste_remove_styles_if_webkit: true,
          paste_enable_default_filters: false,
          menubar: false,
          toolbar: 'styleselect | link | numlist bullist | removeformat',
          relative_urls : false,
          formats: {
            'body1': { block: 'p', classes: 'body1' },
            'h2': { block: 'h2', classes: 'h2' },
            'h3': { block: 'h3', classes: 'h3' },
            'h4': { block: 'h4', classes: 'h4' },
            'h5': { block: 'h5', classes: 'h5' },
            'h6': { block: 'h6', classes: 'h6' },
            'blockquote': { block: 'blockquote', classes: 'blockquote' },
            'footnote': { inline: 'sup', classes: 'footnote' },
          },
          style_formats: [{
            title: 'Block',
            items: [{
              title: 'Paragraph', 
              format: 'body1'
            },{
              title: 'Headline 2',
              format: 'h2'
            },{
              title: 'Headline 3',
              format: 'h3'
            }, {
              title: 'Headline 4',
              format: 'h4'
            }, {
              title: 'Headline 5',
              format: 'h5'
            }, {
              title: 'Headline 6',
              format: 'h6'
            }, {
              title: 'Block Quote',
              format: 'blockquote'
            }]
          }, {
            title: 'Inline',
            items: [{
              title: 'Bold',
              icon: 'bold',
              format: 'bold'
            }, {
              title: 'Italic',
              icon: 'italic',
              format: 'italic'
            }, {
              title: 'Footnote',
              icon: 'sup',
              format: 'footnote'
            }]
          }]
        })
      })
    },
  },
  watch: {
    'model': {
      handler: function(value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}