<template>
  <div class="editor">
    <Toolbar
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
      style="border: 1px solid #ccc"
    />
    <Editor
      v-model="valueHtml"
      style="height: 500px; overflow-y: hidden;border: 1px solid #ccc"
      :default-config="editorConfig"
      :mode="mode"
      @onChange="contentChange"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup name='WangEditor' lang='ts'>

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'

const props = defineProps<{
  text?:string, // text:用于做数据回显功能
  ishow?:true
}>()

const emits = defineEmits<{(e:"change", data:any):void // 主要用于父组件接收wangeditor实时编辑的内容
}>()

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')

// 工具栏模式
const mode = ref('default') // 简洁

onMounted(() => {
  setTimeout(() => {
    valueHtml.value = props.text ?? '' // 回显数据
    console.log('text init', valueHtml.value)
    // const toolbar = DomEditor.getToolbar(editorRef.value) as any;
    // const curToolbarConfig = toolbar.getConfig();
    // console.log(curToolbarConfig.toolbarKeys);  //这里会打印出所有的key
  }, 200)
})
const resetEditorContent = () => {
  console.log('reset')
  valueHtml.value = ''
}
const setText = (data) => {
  console.log('set' + data)
  console.log('editor' + editorRef)
  valueHtml.value = data
}
expose({
  resetEditorContent,
  setText,
})
/**
 * file 转Base64 DataURL
 * @param {File} file
 * @returns
 */
const fileToBase64Async = (file:File) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e:any) => {
      resolve(e.target.result)
    }
  })
}
// [
//     "blockquote",
//     "header1",
//     "header2",
//     "header3",
//     "|",
//     "bold",
//     "underline",
//     "italic",
//     "through",
//     "color",
//     "bgColor",
//     "clearStyle",
//     "|",
//     "bulletedList",
//     "numberedList",
//     "todo",
//     "justifyLeft",
//     "justifyRight",
//     "justifyCenter",
//     "|",
//     "insertLink",
//     {
//         "key": "group-image",
//         "title": "图片",
//         "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
//         "menuKeys": [
//             "insertImage",
//             "uploadImage"
//         ]
//     },
//     "insertVideo",
//     "insertTable",
//     "codeBlock",
//     "|",
//     "undo",
//     "redo",
//     "|",
//     "fullScreen"
// ]

// 工具栏配置项
const toolbarConfig = {
  excludeKeys: ['insertLink', 'viewImageLink', 'insertVideo', 'emotion', 'fullScreen', 'codeBlock', 'todo'] // 排除不需要的菜单
}

// 编辑器配置项
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      async customUpload(file:File, insertFn:any) {
        const fileBase64 = fileToBase64Async(file)
        insertFn(fileBase64) // 最后插入图片 insertFn(url, alt, href)，alt：描述，href:链接，后面非必填
        console.log(fileBase64)
      },
    },
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  console.log('destroy')
  if (editorRef.value == null) return
  editorRef.value.destroy()
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const contentChange = (editor:any) => {
  emits('change', editor.getHtml())
}

</script>

<style lang="scss">

.editor{
  width: 100%;
  //修改工具栏的背景色
  .w-e-bar{
    background: var(--w-e-bar-bg-color);
  }
}

// 去除内置样式
.w-e-text-container blockquote, .w-e-text-container li,
.w-e-text-container p,
.w-e-text-container td,
.w-e-text-container th,
.w-e-toolbar *{
  line-height: unset !important;
}
</style>

<!--<template>-->
<!--  <div>-->
<!--    <div style="border: 1px solid #ccc; margin-top: 10px">-->
<!--      <Toolbar-->
<!--        :editor="editorRef"-->
<!--        :default-config="toolbarConfig"-->
<!--        :mode="mode"-->
<!--        style="border-bottom: 1px solid #ccc"-->
<!--      />-->
<!--      <Editor-->
<!--        v-model="valueHtml"-->
<!--        :default-config="editorConfig"-->
<!--        :mode="mode"-->
<!--        style="height: 400px; overflow-y: hidden"-->
<!--        @onCreated="handleCreated"-->
<!--        @onChange="handleChange"-->
<!--        @onDestroyed="handleDestroyed"-->
<!--        @onFocus="handleFocus"-->
<!--        @onBlur="handleBlur"-->
<!--        @customAlert="customAlert"-->
<!--        @customPaste="customPaste"-->
<!--      />-->
<!--    </div>-->
<!--    <div style="margin-top: 10px;display: none">-->
<!--      <textarea-->
<!--        v-model="valueHtml"-->
<!--        readonly-->
<!--        style="width: 100%; height: 200px; outline: none;"-->
<!--      />-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import '@wangeditor/editor/dist/css/style.css'-->
<!--import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'-->
<!--import { Editor, Toolbar } from '@wangeditor/editor-for-vue'-->
<!--export default {-->
<!--  components: { Editor, Toolbar },-->
<!--  methods: {-->
<!--    getMessage() {-->
<!--      return this.valueHtml-->
<!--    },-->
<!--    setMessage(data) {-->
<!--      this.valueHtml = data-->
<!--    }-->

<!--  },-->
<!--  setup() {-->

<!--    // defineProps({-->
<!--    //   target: {-->
<!--    //     type: Object,-->
<!--    //     default: null,-->
<!--    //   },-->
<!--    //   targetKey: {-->
<!--    //     type: String,-->
<!--    //     default: '',-->
<!--    //   },-->
<!--    // })-->
<!--    //-->
<!--    //const emit = defineEmits(['editor-load']),-->

<!--    // 编辑器实例，必须用 shallowRef，重要！-->
<!--    const editorRef = shallowRef()-->

<!--    // 内容 HTML-->
<!--    const valueHtml = ref('<p>hello</p>')-->

<!--    // 模拟 ajax 异步获取内容-->
<!--    onMounted(() => {-->
<!--      setTimeout(() => {-->
<!--        valueHtml.value = ''-->
<!--      }, 1500)-->
<!--      this.$emit('editor-load')-->
<!--    })-->

<!--    const toolbarConfig = {}-->
<!--    const editorConfig = { placeholder: '请输入内容...' }-->

<!--    // 组件销毁时，也及时销毁编辑器，重要！-->
<!--    onBeforeUnmount(() => {-->
<!--      const editor = editorRef.value-->
<!--      if (editor == null) return-->

<!--      editor.destroy()-->
<!--    })-->

<!--    // 编辑器回调函数-->
<!--    const handleCreated = (editor) => {-->
<!--      console.log('created', editor)-->
<!--      editorRef.value = editor // 记录 editor 实例，重要！-->
<!--    }-->
<!--    const handleChange = (editor) => {-->
<!--      console.log('change:', editor.getHtml())-->
<!--      // if (target && targetKey) {-->
<!--      //   target[targetKey] = editor.getHtml()-->
<!--      // }-->
<!--      // emit('enterEditor', editor.getHtml())-->
<!--    }-->
<!--    const handleDestroyed = (editor) => {-->
<!--      console.log('destroyed', editor)-->
<!--    }-->
<!--    const handleFocus = (editor) => {-->
<!--      console.log('focus', editor)-->
<!--    }-->
<!--    const handleBlur = (editor) => {-->
<!--      console.log('blur', editor)-->
<!--    }-->
<!--    const customAlert = (info, type) => {-->
<!--      alert(`【自定义提示】${type} - ${info}`)-->
<!--    }-->
<!--    const customPaste = (editor, event, callback) => {-->
<!--      console.log('ClipboardEvent 粘贴事件对象', event)-->

<!--      // 自定义插入内容-->
<!--      editor.insertText('xxx')-->

<!--      // 返回值（注意，vue 事件的返回值，不能用 return）-->
<!--      callback(false) // 返回 false ，阻止默认粘贴行为-->
<!--      // callback(true) // 返回 true ，继续默认的粘贴行为-->
<!--    }-->

<!--    const insertText = () => {-->
<!--      const editor = editorRef.value-->
<!--      if (editor == null) return-->

<!--      editor.insertText('hello world')-->
<!--    }-->

<!--    const printHtml = () => {-->
<!--      const editor = editorRef.value-->
<!--      if (editor == null) return-->
<!--      console.log(editor.getHtml())-->
<!--    }-->

<!--    const disable = () => {-->
<!--      const editor = editorRef.value-->
<!--      if (editor == null) return-->
<!--      editor.disable()-->
<!--    }-->

<!--    return {-->
<!--      editorRef,-->
<!--      mode: 'default',-->
<!--      valueHtml,-->
<!--      toolbarConfig,-->
<!--      editorConfig,-->
<!--      handleCreated,-->
<!--      handleChange,-->
<!--      handleDestroyed,-->
<!--      handleFocus,-->
<!--      handleBlur,-->
<!--      customAlert,-->
<!--      customPaste,-->
<!--      insertText,-->
<!--      printHtml,-->
<!--      disable-->
<!--    }-->
<!--  },-->
<!--}-->
<!--</script>-->

