<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfigs" :mode="mode"
      @onCreated="onCreated" />
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'WangEditorV5',
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      mode: 'default',
      html: '',
      editorConfigs: { MENU_CONF: {} }
    }
  },
  props: {
    // 初始化值
    value: {
      type: String,
      default: ''
    },
    // 编辑器配置
    editorConfig: {
      type: Object,
      default: () => {
        return {
          placeholder: '请输入内容'
        }
      }
    },
    // 工具栏配置
    toolbarConfig: {
      type: Object,
      default: () => {
        return {
          //20250508 开启视频
          excludeKeys: ['group-video']
          //excludeKeys: []
        }
      }
    },
    // 上传配置
    uploadConfig: {
      type: Object,
      default: () => {
        return {
          method: 'http',
          url: 'common/uploadimg', // 上传图片地址
          videoUrl: 'common/uploadvideo' // 上传视频地址
        }
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (oldVal !== newVal) {
        this.editor.setHtml(newVal) // 生成编辑器
      }
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    gethtml() {
      const editor = this.editor
      if (editor == null) return ''
      return editor.getHtml()
    },
    upload() {
      const that = this
      that.editorConfigs.MENU_CONF['uploadImage'] = {
        server: that.uploadConfig.url,
        // 自定义上传
        customUpload(file, insert) {
          if (that.uploadConfig.method === 'custom') {
            var fileUrl = URL.createObjectURL(file)
            insert(fileUrl)
          }
          if (that.uploadConfig.method === 'base64') {
            that.readBlobAsDataURL(file, function (dataurl) {
              insert(dataurl)
            })
          }
          if (that.uploadConfig.method === 'http') {
            if (that.uploadConfig.callback) {
              that.uploadConfig.callback(file, insert)
            } else {
              var formData = new FormData()
              formData.append('file', file)
              that.axios.post(that.uploadConfig.url, formData).then(({ data }) => {
                if (data && data.url) {
                  insert(data.url)
                }
              })
            }
          }
        }
        //  //自定义插入图片
        //   customInsert(res, insertFn) {
        //     //// res 即服务端的返回结果
        //     console.log(res)
        //       // 从 res 中找到 url alt href ，然后插入图片
        // // insertFn(url, alt, href)
        //  }
      }
      //上传视频不能超过60M
      //this.setupVideoUpload();
    },
    setupVideoUpload() {
      const that = this;
      this.editorConfigs.MENU_CONF['uploadVideo'] = {
        server: 'common/uploadvideo',
        fieldName: 'video',
        maxFileSize: 1024 * 1024 * 60, // 60MB
        accept: 'video/mp4,video/webm,video/flv',
        customUpload(file, insert) {
          if (that.uploadConfig.method === 'custom') {
            const fileUrl = URL.createObjectURL(file);
            insert(fileUrl);
          } else if (that.uploadConfig.method === 'base64') {
            that.readBlobAsDataURL(file, (dataurl) => {
              insert(dataurl);
            });
          } else if (that.uploadConfig.method === 'http') {
            if (that.uploadConfig.callback) {
              that.uploadConfig.callback(file, insert);
            } else {
              const formData = new FormData();
              formData.append('video', file);
              that.axios.post('common/uploadvideo', formData)
                .then(({ data }) => {
                  if (data && data.url) {
                    insert(data.url);
                  }
                })
                .catch((error) => {
                  console.error('视频上传失败:', error);
                  that.$message.error('视频上传失败，请稍后再试');
                });
            }
          }
        }
      };
    }
  },
  created() {
    this.upload()
    this.editorConfigs = Object.assign(this.editorConfigs, this.editorConfig)
  },
  mounted() {
    this.html = this.value
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style></style>
