VueJS component for the WYSIWYG Tinymce

Tinymce.vue

<template>
    <div>
        <textarea :id="id">{{ content }}</textarea>
    </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'

  import 'tinymce/themes/modern/theme'

  import 'tinymce/plugins/advlist'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/plugins/autolink'
  import 'tinymce/plugins/autosave'
  import 'tinymce/plugins/charmap'
  import 'tinymce/plugins/codesample'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/emoticons'
  import 'tinymce/plugins/fullscreen'
  import 'tinymce/plugins/hr'
  import 'tinymce/plugins/imagetools'
  import 'tinymce/plugins/insertdatetime'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/media'
  import 'tinymce/plugins/noneditable'
  import 'tinymce/plugins/paste'
  import 'tinymce/plugins/print'
  import 'tinymce/plugins/searchreplace'
  import 'tinymce/plugins/tabfocus'
  import 'tinymce/plugins/template'
  import 'tinymce/plugins/textpattern'
  import 'tinymce/plugins/visualblocks'
  import 'tinymce/plugins/anchor'
  import 'tinymce/plugins/autoresize'
  import 'tinymce/plugins/bbcode'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/directionality'
  import 'tinymce/plugins/fullpage'
  import 'tinymce/plugins/help'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/importcss'
  import 'tinymce/plugins/legacyoutput'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/nonbreaking'
  import 'tinymce/plugins/pagebreak'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/save'
  import 'tinymce/plugins/spellchecker'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/toc'
  import 'tinymce/plugins/visualchars'

  import 'tinymce/skins/lightgray/skin.min.css'
  import 'tinymce/skins/lightgray/content.min.css'

  export default {
    name: 'tinymce',
    props: {
      id: {
        type: String,
        required: true
      },
      htmlClass: {default: '', type: String},
      value: {default: ''},
      plugins: {
        default: function () {
          return [
            'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'template paste textcolor colorpicker textpattern imagetools toc help emoticons hr'
          ]
        },
        type: Array
      },
      toolbar1: {
        default: 'code | formatselect | bold italic strikethrough | link table | alignleft aligncenter alignright alignjustify | numlist bullist | removeformat',
        type: String
      },
      toolbar2: {default: '', type: String},
      configs: {
        default: function () {
          return {}
        },
        type: Object
      }
    },
    data () {
      return {
        content: '',
        editor: null,
        cTinyMce: null,
        checkerTimeout: null,
        isTyping: false
      }
    },
    mounted () {
      this.content = this.value || ''
      this.init()
    },
    beforeDestroy () {
      this.editor.destroy()
    },
    watch: {
      value: function (newValue) {
        if (!this.isTyping) {
          if (this.editor !== null) {
            this.editor.setContent(newValue)
          } else {
            this.content = newValue
          }
        }
      }
    },
    methods: {
      init () {
        let options = {
          selector: '#' + this.id,
          skin: false,
          toolbar1: this.toolbar1,
          toolbar2: this.toolbar2,
          plugins: this.plugins,
          branding: false,
          menubar: false,
          init_instance_callback: (editor) => {
            this.editor = editor
            editor.on('KeyUp', (e) => {
              this.submitNewContent()
            })
            editor.on('Change', (e) => {
              if (this.editor.getContent() !== this.value) {
                this.submitNewContent()
              }
            })
          },
          setup: (editor) => {
            this.editor = editor
            editor.on('Init', (e) => {
              editor.setContent(this.content)
              this.$emit('input', this.content)
            })
          }
        }
        tinymce.init(this.concatAssciativeArrays(options, this.configs))
      },
      concatAssciativeArrays (array1, array2) {
        if (array2.length === 0) {
          return array1
        }
        if (array1.length === 0) {
          return array2
        }
        let dest = []
        for (let key in array1) {
          dest[key] = array1[key]
        }
        for (let key in array2) {
          dest[key] = array2[key]
        }
        return dest
      },
      submitNewContent () {
        this.isTyping = true
        if (this.checkerTimeout !== null) {
          clearTimeout(this.checkerTimeout)
        }
        this.checkerTimeout = setTimeout(() => {
          this.isTyping = false
        }, 300)

        this.$emit('input', this.editor.getContent())
      }
    }
  }
</script>

<style scoped>

</style>

using

<form-tinymce id="editorContent"
              v-model="content"
              :configs="{height: 500}">
</form-tinymce