<template>
  <div
    id="sendText"
    ref="myEditableDiv"
    contenteditable="plaintext-only"
    style="-webkit-user-select: auto; -webkit-user-select: text"
    @click="setSelection($event)"
  >
    12345678
  </div>

  <div @click="insertImage(e)">添加图片</div>
</template>

<script setup>
import srcImg from '../../assets/img/account/account-anchor.png'
let range = null

const setSelection = () => {}

const insertImage = event => {
  // 获取当前光标所在位置
  const selection = window.getSelection()
  range = selection.getRangeAt(0)
  console.log('range:', range)
  // 创建一个新的image元素
  const image = new Image()
  image.src = srcImg
  image.className = 'test'

  // 将image插入到range所在位置
  range.insertNode(image)

  // 移动光标到插入的图片后面
  const newRange = document.createRange()
  newRange.setStartAfter(image)
  newRange.collapse(true)
  selection.removeAllRanges()
  selection.addRange(newRange)
}

onMounted(() => {
  // 获取可编辑DIV元素
  /* const editableDiv = this.$refs.myEditableDiv

  // 在编辑区域绑定事件监听器
  editableDiv.addEventListener('click', () => {
    // 注册点击事件，使得插入图片时能够确定光标位置
    this.$nextTick(() => {
      editableDiv.focus()
    })
  })

  editableDiv.addEventListener('paste', (event) => {
    // 阻止默认粘贴行为，以便我们自己处理内容
    event.preventDefault()

    // 获取当前光标位置
    const selection = window.getSelection()
    const range = selection.getRangeAt(0)

    // 获取剪切板数据
    const dataTransfer = event.clipboardData || window.clipboardData
    const files = dataTransfer.files

    // 如果剪切板中有文件，则插入第一个文件
    if (files.length > 0) {
      const file = files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        // 创建一个新的image元素
        const image = new Image()
        image.src = reader.result

        // 将image插入到range所在位置
        range.insertNode(image)

        // 移动光标到插入的图片后面
        const newRange = document.createRange()
        newRange.setStartAfter(image)
        newRange.collapse(true)
        selection.removeAllRanges()
        selection.addRange(newRange)
      }
    }
  }) */
})
</script>

<style>
#sendText {
  border: 1px solid #333;
  margin: 20px;
}
</style>