How can I use the sb-asset-selector in a tinyMCE custom field?

Our proxy component sb-asset-selector allows you to easily upload and select images from Storyblok. You can combine it with a tinyMCE to have the upload and select capability in your custom field type as well.

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
<sb-asset-selector :uid="uid" field="image">
</sb-asset-selector>
<textarea v-model="model.content" id="mytextarea">
</textarea>
</div>`,
  methods: {
    initWith() {
      return {
        plugin: 'wysiwyg-tinymce',
        content: '',
        image: ''
      }
    },
    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: 306,
          height: 230,
          plugins: 'fullscreen link lists code visualblocks',
          menubar: false,
          toolbar: 'styleselect | link | numlist bullist | removeformat',
          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'
            }]
          }]
        })
      })
    },
  },
  watch: {
    'model.image': function(value) {
      if (typeof tinymce !== 'undefined' && this.model.image && this.model.image.length > 0) {
        tinymce.activeEditor.insertContent('<img alt="Image" height="42" width="42" src="' + value + '"/>')
        this.model.image = ''
      }
    },
    'model': {
      handler: function(value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}