fieldtype-mce.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div><div v-if="tinyLoaded"><plugin-mce :value=model.content @input=handleInput :config=config></plugin-mce></editor></div></div>`,
  data() {
    return {
      config: {
        plugins: 'fullscreen link lists code visualblocks',
        menubar: false,
        toolbar: 'styleselect | link | numlist bullist | removeformat code',
        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: 'Styles', items: [{ title: 'Text Pink', selector: '*', classes: 'text-pink-carnation' }] }]
      },
      tinyLoaded: false
    }
  },
  methods: {
    initWith() {
      return {
        plugin: 'example_plugin',
        content: 'Hello world!'
      }
    },
    pluginCreated() {
      this.$sb.getScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js', () => {
        this.tinyLoaded = true
      })
      console.log('plugin:created')
    },
    handleInput(value) {
      this.model.content = value
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  },
  components: {
    'plugin-mce': {
      template: "<div class=tinymce><div class=tinymce__init-area ref=textarea></div></div>",
      props: {
        config: {
          type: Object,
          default: function _default() {
            return {};
          }
        },
        value: {
          type: String,
          default: ''
        },
        initialValue: {
          type: String,
          default: ''
        }
      },
    
      data: function data() {
        return {
          instance: null
        };
      },
    
      computed: {
        content: {
          cache: false,
          get: function get() {
            return this.instance.getContent();
          }
        }
      },
    
      methods: {
        handleError: function handleError(err) {
          this.$emit('error', err);
        },
        handleSuccess: function handleSuccess(editor) {
          this.instance = editor;
          this.$emit('init', editor);
    
          var content = this.initialValue || this.value;
    
          editor.setContent(content);
          editor.on('input change undo redo setcontent', this.handleInput);
          editor.on('change setcontent', this.handleChange);
        },
        setContent: function setContent(content) {
          var instance = this.instance;
    
          if (instance) {
            instance.setContent(content);
    
            return true;
          }
    
          return false;
        },
        handleInput: function handleInput() {
          this.$emit('input', this.instance.getContent());
        },
        handleChange: function handleChange() {
          this.$emit('change', this.instance.getContent());
        }
      },
    
      watch: {
        initialValue: function initialValue(newValue) {
          this.setContent(newValue);
        }
      },
    
      ready: function ready() {
        if (!window.tinymce) {
          return this.handleError(new Error("TinyMce wasn't found"));
        }
    
        var config = this.config;
        var target = this.$els.textarea;
    
        config.target = target;
        config.init_instance_callback = this.handleSuccess;
    
        window.tinymce.init(config).catch(this.handleError);
      },
      beforeDestroy: function beforeDestroy() {
        this.$emit('destroy', this.instance);
        window.tinymce.remove(this.$els.textarea);
      }
    }
  }
}