將div設(shè)置 contenteditable 屬性

 <div contenteditable
           ref="textInput"
           id="drop-area"
           rows="4"
           resize="false"
           class="textInput h100 overflow-x"
           @focus="focus = true"
           @blur="focus = false"
           @input="inputChange"
           @keydown.enter.exact.prevent="handleEnter"
           @keyup.ctrl.enter.prevent.exact="handleLine"
           @keydown.up.stop="handleUp"
           @keydown.down.stop="handleDown"></div>

生命周期 mounted綁定粘貼事件

           this.$refs['textInput'].addEventListener('paste', this.handlePaste)

         /**
        * 粘貼圖片
        */
      handlePaste(){
          const clipboardData = e?.clipboardData
          const file = clipboardData?.files[0]
         /**
           * 獲取圖片按比例縮小的寬度
           */
          getImgWidth(file).then((width) => {
            const src = fileToUrl(file)
            const uid = this.getUid()
            document.execCommand('insertHTML', false, `<img src="${src}"  ondblclick="handelImage(\'' + src + '\')" width=${width} uid=${uid} />`)
            // 存儲(chǔ)復(fù)制的文件流
            this.copyImgList.push({ file, uid })
          })
}
   /**
     * 輸入框聚焦
     */
    getSelectPos() {
      var esrc = this.$refs['text-input']
      var range = document.createRange()
      range.selectNodeContents(esrc)
      range.collapse(false)
      var sel = window.getSelection()
      sel.removeAllRanges()
      sel.addRange(range)
    },