粘贴时图片如何处理成url

[liwenjingf]

What problem does this feature solve?

你好，麻烦问下
1.菜单栏的上传图片在onchange已处理，ctrl+v的时候，怎么处理图片为url呢。；
2.只读模式的时候，还能ctrl+v内容，在哪里禁用呢

What does the proposed API look like?

ctrl+v的时候，我的业务需要先调用上传接口，再用接口返回的url回显

[douglasmatheus]

Hi, I use the following code to work with pasting of images and files. The original code is pure js, so I just adapted the following code for the editor, putting it inside main.ts.

The code needs to be revised for ts, but as it is it works. It is also already handling drag and drop events.

Hope it helps you.

  interface Event {
    clipboardData: any
  }

  container.onpaste = function (event: Event) {
    const items = event.clipboardData.items
    for (const index in items) {
      const item = items[index]
      if (item.kind === 'file') {
        const file = item.getAsFile()
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function () {
          // 计算宽高
          const image = new Image()
          const value = fileReader.result as string
          image.src = value
          image.onload = function () {
            instance.command.executeImage({
              value,
              width: image.width,
              height: image.height
            })
            imageFileDom.value = ''
          }
        }
      }
    }
}
// Optional.   Show the copy icon when dragging over. Seems to only work for chrome.
container.addEventListener('dragover', function (e) {
  if (e) {
      e.stopPropagation()
      e.preventDefault()
      if (e.dataTransfer) {
        e.dataTransfer.dropEffect = 'copy'
      }
  }
})

// Get file data on drop
container.addEventListener('drop', function (e) {
    e.stopPropagation()
    e.preventDefault()
    const files = e?.dataTransfer?.files // Array of all files

    if (files) {
      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function () {
          // 计算宽高
          const image = new Image()
          const value = fileReader.result as string
          image.src = value
          image.onload = function () {
            instance.command.executeImage({
              value,
              width: image.width,
              height: image.height
            })
            imageFileDom.value = ''
          }
        }
      }
    }
})

[douglasmatheus]

I hadn't noticed, but the editor already handles the paste event with images. I don't know if that's exactly what you wanted, anyway I leave the code in case someone wants to use it.

[liwenjingf]

在main.ts重写onpaste也覆盖不了插件里的_paste事件，会同时出现两个图片。我貌似找不到改变_paste的入口

[douglasmatheus]

Yes I realized that later. It would be interesting if @Hufe921 added the paste event inside listener/eventBus.

Anyway @Hufe921 , I realized that drag and drop of images is not working.

[Hufe921]

https://hufe.club/canvas-editor-docs/guide/override.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F