<template>
  <editor :init="init" v-bind="$attrs" v-on="$listeners" @onChange="onChange" @onBlur="onBlur" />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import ImageUpload from './imageUpload'
export default {
  components: {
    editor: Editor
  },
  data() {
    return {
      init: {
        min_height: 300,
        max_height: 500,
        menubar: false,
        language: this.$i18n.locale.replace('-', '_'),
        branding: false,
        plugins: 'wordcount table autoresize charmap fullscreen hr lists link code preview quickbars indent2em',
        toolbar:
          'removeformat | undo redo | styleselect fontselect fontsizeselect lineheight bold italic underline strikethrough forecolor backcolor | link quickimage image media table | align hangingindent indent2em indent outdent numlist bullist | charmap  blockquote hr fullscreen | code preview',
        font_formats:
          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Times New Roman',
        fontsize_formats: '8pt 10pt 12pt 14pt 15pt 16pt 17pt 18pt 20pt 24pt',
        lineheight_formats: '0.5 1 1.2 1.5 2',
        images_upload_handler: ImageUpload,
        automatic_uploads: true,
        quickbars_insert_toolbar: false,
        style_formats: [{ title: '悬挂缩进', block: 'p', styles: { textIndent: '-2em', paddingLeft: '2em' } }],
        content_style: 'img {max-width:100%;}'
      }
    }
  },
  methods: {
    onChange(event, editor) {
      this.dispatch('ElFormItem', 'el.form.change', editor.getContent())
    },
    onBlur(event, editor) {
      this.dispatch('ElFormItem', 'el.form.blur', editor.getContent())
    },
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root
      var name = parent.$options.componentName

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.componentName
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
    }
  }
}
</script>

<style>
.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
  width: 4em !important;
}
</style>
