<template>
  <div id="wangeditor" >
    <div ref="editorElem" :style="{'height':height+'px'}"/>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Wangeditor',
  model: {
    prop: 'content',
    event: 'change'
  },
  props: {
    height: {
      type: String,
      default: '300'
    },
    content: {
      type: String,
      default: ''
    }, // 内容
    menus: {// 菜单配置
      type: Array,
      default: function() {
        return [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'table' // 表格
        ]
      }
    }
  },
  data() {
    return {
      editorContent: '',
      editor: null
    }
  },
  watch: {
    content(val) {
      if (val !== this.getContent()) {
        this.setContent(val)
      }
    }
  }, // 接收父组件的方法
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      var that = this
      that.editor = new E(that.$refs.editorElem) // 创建富文本实例
      that.editor.customConfig.debug = true
      debugger
      that.editor.customConfig.onchange = html => {
        that.editorContent = html
        console.log('onchange')
        that.changeContent(html) // 把这个html通过content的方法传入父组件
      }
      // editor.customConfig.uploadImgServer = "你的上传图片的接口";
      // editor.customConfig.uploadFileName = "你自定义的文件名";
      // editor.customConfig.uploadImgHeaders = {
      //   Accept: "*/*",
      //   Authorization: "Bearer " + token //头部token
      // };
      console.log(that.menus)
      // that.editor.customConfig.menus = that.menus
      that.editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'table' // 表格
      ]

      that.editor.customConfig = {
        uploadImgMaxSize: 1 * 1024 * 1024 // 将图片大小限制为 3M
      }
      // 下面是最重要的的方法
      that.editor.customConfig.uploadImgHooks = {
        before: function(xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function(xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          this.imgUrl = Object.values(result.data).toString()
        },
        fail: function(xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function(xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function(xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function(insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          const url = Object.values(result.data) // result.data就是服务器返回的图片名字和链接
          JSON.stringify(url) // 在这里转成JSON格式
          insertImg(url)
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
      that.editor.customConfig.uploadImgShowBase64 = true
      that.editor.customConfig.showLinkImg = false
      console.log('===========')
      console.log(that.content)
      that.editor.create()
      that.setContent(that.content)
    },
    getContent() {
      return this.editor.txt.html()
    },
    setContent(content) {
      this.editor.txt.html(content)
    },
    changeContent(content) {
      console.log(content)
      this.$emit('change', content)
    }
  }
}
</script>

// WEBPACK FOOTER //
// src/components/wangeditor/wangeditor.vue