<template>
  <div>
    <Editor v-model="content" :init="myTinyInit"></Editor>
  </div>
</template>

<script setup name="TinymceEditor">
import { computed, defineEmits, defineProps, onMounted, reactive, ref, watch } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver'
import 'tinymce/models/dom/model'
//按需引入插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/help'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/code'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/fullscreen'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  plugins: {
    type: [String, Array],
    default: 'lists link image table help wordcount code preview fullscreen fontsize',
  },
  toolbar: {
    type: [String, Array],
    default:
      'undo redo formatselect fontsize bold italic forecolor backcolor lineheight alignleft aligncenter alignright alignjustify bullist numlist subscript superscript outdent indent table code preview fullscreen',
  },
})
// image
const emit = defineEmits(['input'])

const myTinyInit = reactive({
  width: '100%',
  height: 500, // 默认高度
  language_url: '/shenze/tinymce/langs/zh_CN.js', // 配置汉化
  language: 'zh_CN', // 语言标识
  branding: false, // 不显示右下角logo
  auto_update: false, // 不进行自动更新
  resize: true, // 可以调整大小
  menubar: false, // 菜单栏
  skin_url: '/shenze/tinymce/skins/ui/oxide', // 手动引入CSS
  content_css: '/shenze/tinymce/skins/content/default/content.css', // 手动引入CSS
  toolbar_mode: 'wrap',
  // selector: 'textarea',
  plugins: props.plugins, // 插件
  toolbar: props.toolbar, // 功能按钮
  help_accessibility: false,
  //图片上传方法（注意！！：要使用 promise 对象中的 resolve 返回图片路径，否则会报错）
  images_upload_handler: (blobInfo) =>
    new Promise((resolve) => {
      // 获取到文件流数据
      console.log(blobInfo.blob())
      let formData = new FormData()
      formData.append('file', blobInfo.blob(), blobInfo.filename())
      // 为了方便测试，返回一张固定的在线图片
      resolve('https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230512090059968.png')
      // 请求真实的上传图片接口获取在线地址并通过resolve返回
      // axios
      //   .post(`/api/backend/upload`, formData, {
      //     headers: {
      //       'Content-Type': 'multipart/form-data',
      //       Authorization: 'Bearer ' + store.state.user.accessToken,
      //     },
      //   })
      //   .then((res) => {
      //     if (res.data.code === 1) {
      //       resolve(`/image_manipulation${res.data.data.filePath}`)
      //     } else {
      //       ElNotification.warning(res.data.msg)
      //     }
      //   })
      //   .catch((error) => {
      //     reject(error)
      //   })
    }),
})

const initContent = computed(() => {
  return props.modelValue
})

onMounted(() => {
  tinymce.init({})
})

const content = ref()
watch(
  initContent,
  (newVal) => {
    content.value = newVal
  },
  { deep: true, immediate: true }
)

watch(
  content,
  (newVal) => {
    emit('input', newVal)
  },
  { deep: true }
)
</script>

<style scoped lang="less">

.tox-editor-header {
  width: auto;
}

</style>
