<template>
  <div>
    <div id="editor" ref="myEditor"></div>
    <slot></slot>
  </div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
  name: 'ComponentWangeditor',
  data() {
    return {
      edit: ''
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    config: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    uploadConfig: {
      type: Object,
      default: () => {
        return {
          method: 'http', // 支持custom(objurl)和http(服务器)和base64
          url: '/'
        }
      }
    }
  },
  computed: {
    customConfig() {
      return {
        pasteFilterStyle: false, // 关闭掉粘贴样式的过滤
        pasteIgnoreImg: false, // 粘贴时不忽略图片
        ...this.config
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.editor.txt.text(newVal) // 生成编辑器
    }
  },
  components: {},
  methods: {
    readBlobAsDataURL(blob, callback) {
      var a = new FileReader()
      a.onload = function (e) {
        callback(e.target.result)
      }
      a.readAsDataURL(blob)
    },
    initEditor() {
      var self = this
      this.editor = new WangEditor(this.$refs.myEditor)
      // 配置 onchange 事件
      this.editor.customConfig = this.customConfig
      this.editor.customConfig.uploadImgMaxLength = 5
      this.editor.change = function () {
        // 编辑区域内容变化时
        self.$emit('input', this.txt.html())
        self.$emit('onchange', this.txt.html(), this.txt)
        // editor.txt.html('.....') //设置编辑器内容
        // editor.txt.clear() //清空编辑器内容
        // editor.txt.append('<p>追加的内容</p>')//继续追加内容。
        // editor.txt.text()  // 读取 text
        // editor.txt.getJSON()  // 获取 JSON 格式的内容
      }
      // this.editor.customConfig.pasteTextHandle = function (pasteStr) {
      //   // 对粘贴的文本进行处理，然后返回处理后的结果
      //   console.log(pasteStr)
      //   return pasteStr
      // }
      this.editor.customConfig.customUploadImg = function (files, insert) {
        if (self.uploadConfig.method === 'custom') {
          files.forEach(file => {
            var fileUrl = URL.createObjectURL(file)
            insert(fileUrl)
          })
        }
        if (self.uploadConfig.method === 'base64') {
          files.forEach(file => {
            self.readBlobAsDataURL(file, function (dataurl) {
              insert(dataurl)
            })
          })
        }
        if (self.uploadConfig.method === 'http') {
          if (self.uploadConfig.callback) {
            self.uploadConfig.callback(files, insert)
          } else {
            var formData = new FormData()
            files.forEach(file => {
              formData.append('file', file)
            })
            self.axios.post(self.uploadConfig.url, formData).then(({ data }) => {
              if (data && data.url) {
                insert(data.url)
              }
            })
          }
        }
      }
      this.editor.create() // 生成编辑器
      this.editor.txt.text(this.value) // 生成编辑器
      this.$emit('oninit', this.editor)
    }
  },
  beforeCreate() { },
  created() { },
  beforeMount() { },
  mounted() {
    this.initEditor()
  }
}
</script>

<style>
.w-e-toolbar {
  flex-wrap: wrap;
}
</style>
