<template>
  <div :class="['ipub-editor', isFocus?'ipub-editor--active':'']">
    <editor :value="value"
            :api-key="apiKey"
            :init="init"
            @onFocus="handleFocus"
            @onBlur="handleBlur"
            @input="handleInput"
            @redo="handleInput"
            @undo="handleInput"
            @change="handleInput" />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'IpubEditor',
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      isFocus: false,
      apiKey: 'pwp1b4hjmuq8npwyk47liqx598vewwae6omxczh790beqf73',
      init: {
        toolbar_mode: 'wrap',
        height: this.height,
        menubar: false,
        branding: false, // 去水印
        paste_data_images: true, // 允许粘贴图像
        selector: 'textarea',
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount',
        ],
        toolbar:
          `code fullscreen | undo redo | paste pastetext | formatselect fontsizeselect lineheight | bold italic underline forecolor backcolor  charmap |
           alignleft aligncenter alignright alignjustify | link unlink anchor |
           bullist numlist outdent indent | subscript superscript removeformat | image table media`,
        formats: {
          h1: { block: 'h1', classes: 'ipubw-h1' },
          h2: { block: 'h2', classes: 'ipubw-h2' },
          h3: { block: 'h3', classes: 'ipubw-p1' },
          p: { block: 'p', classes: 'ipubw-p2' },
        },
        block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h3',
        lineheight_formats: '0.2 0.5 0.7 0.8 1 1.2 1.5 1.7 2 2.2 2.5 3 3.5 4',
        content_style: `h1,h2,h3{
                          font-family: 'Times new roman';
                          margin-block-start: 0;
                          margin-block-end: 0;
                          margin-bottom: 12px;
                        }
                        ol, ul{ padding: 0;margin:0; }
                        ol li { margin-left: 20px; }
                        ul li { margin-left: 20px;position: relative; }
                        ul li::after {
                          content: '';
                          height: 4px;
                          width: 4px;
                          position: absolute;
                          top: 8px;
                          left: -16px;
                          border-radius: 50%;
                          background: #1E1D40;
                        }
                        p,div{
                          font-size: 16px,
                          line-height: 24px,
                          font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial';
                        }
                        h1 {
                          font-size: 32px;
                          line-height: 40px;
                        }
                        h2 {
                          font-size: 24px;
                          line-height: 32px;
                        }
                        h3 {
                          font-size: 16px;
                          line-height: 24px;
                          font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica', 'Arial';
                        }`
      }
    }
  },
  methods: {
    handleInput (val) {
      this.$emit('input', val)
    },
    handleFocus (e) {
      this.isFocus = true
      this.$emit('focus', e)
    },
    handleBlur () {
      this.isFocus = false
      this.$emit('blur', this.value)
    }
  }
}
</script>

<style lang="scss">
.ipub-editor {
  transition: 0.3s all;
  border: 1px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  &--active {
    border: 1px solid $link_color;
  }
}
</style>
