VUE:quill修改預設複製圖片base64的行為--富文字複製圖片變成上傳

le.li發表於2024-11-23
VueUI
富文字quill 1.3.7
實現： 
        window.addEventListener('paste', (event) => {
        if (event.clipboardData && event.clipboardData?.files && event.clipboardData.files?.length) {
          // 阻止預設複製事件
          event.preventDefault()
          let curFile = event.clipboardData.files[0]
          if (!this.handleBeforeUpload(curFile)) {
            return
          }
          let formData = new FormData()
          formData.append('file', curFile)
          uploadFile(formData)
            .then((rs) => {
              let quill = this.Quill
              // 游標位置
              let postion = quill.selection.savedRange.index
              // 將圖片地址插入富文字游標後
              quill.insertEmbed(postion, 'image', rs.path)
              // 游標後移
              quill.setSelection(postion + 1)
            })
            .catch((error) => {
              this.$message.error('圖片插入失敗')
            })
        }
      })

補充內容：

1、複製是觸發的哪些物件的事件：window物件
開啟F12，Source->右側找到Event Listener Breakpoints
Clipboard下勾選paste等剪貼簿事件，Ctrl+V時，可以進入debug
2、window新增複製事件後，為啥會出發兩次
一次是自己定義的，一次是預設行為
需要新增：event.preventDefault()，阻止預設處理。

相關文章