<template>
  <div ref="editor"></div>
</template>

<script>
import E from "wangeditor";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    meanArray: {
      // 自定义菜单
      type: Array,
      default: null,
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  watch: {
    value: {
      handler(value, oldName) {
          console.log('editor',value, oldName)
        if (value !== oldName) {
            this.editor&&this.editor.txt.html(this.value);
        }
      },
      immediate: true,
      deep:true,
    },
    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  data() {
    return {
      // 默认有这么多菜单，meanArray有值以meanArray为准
      uploadUrl: this.$server + '/article/uploadImage',
      defaultMeanus: [
        "head",
        "bold",
        "fontSize",
        "fontName",
        "italic",
        "underline",
        "strikeThrough",
        "indent",
        "lineHeight",
        "foreColor",
        "backColor",
        "link",
        "list",
        "justify",
        "quote",
        "emoticon",
        "image",
        "video",
        "table",
        "code",
        "splitLine",
        "undo",
        "redo",
      ],
      editor: "",
    };
  },
  methods: {
    init() {
      const _this = this;
      const uploadUrl =  this.uploadUrl
      this.editor = new E(this.$refs.editor);
    //   this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片
    //   this.editor.config.debugInfo = false; //关闭网络路径图片方式
      this.editor.config.uploadImgServer = uploadUrl; // 上传图片的接口地址
      this.editor.config.uploadFileName = "file"; // formdata中的name属性
      this.editor.config.height = "800"; // formdata中的name属性
      this.editor.config.uploadImgHeaders = {
        token: sessionStorage.getItem('token') // 设置请求头
     }
     this.editor.config.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url =result.msg;
            insertImg(url);
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
        // 图片上传并返回结果，但图片插入错误时触发
        // fail: function (xhr, editor, result) {
        //     console.log(result)
        // },
        // success: function (xhr, editor, result) {
        //     // 图片上传并返回结果，图片插入成功之后触发
        //     editor.insertImg(_this.$server + result.data);
        //     console.log(result, 'success')
        // }
      }
      this.setMenus(); // 设置菜单
      this.editor.config.onchange = (html) => {
        _this.$emit("change", html); // 将内容同步到父组件中
      };
      this.editor.create(); // 创建编辑器
    },
    setMenus() {
      // 设置菜单
      if (this.meanArray) {
        this.editor.config.menus = this.meanArray;
      } else {
        this.editor.config.menus = this.defaultMeanus;
      }
    },
    getHtml() {
      // 得到文本内容
      return this.editor.txt.html();
    },
    setHtml(txt) {
      // 设置富文本里面的值
      this.editor.txt.html(txt);
    },
  },
  mounted() {
    const that = this;
    that.$nextTick(function () {
      that.init();
    });
  },
};
</script>
