从文件拖拽图片到富文本框以及复制图片到文本框，都会跳过上传服务器，仍然显示的是base64格式

[zhangzor]

直接从文件拖拽图片到富文本输入框内，会跳过上传服务器操作。

[Zou-Wen]

https://www.codemzy.com/blog/tiptap-pasting-images

可以参考这篇文章关于粘贴图片的自定义

[zhangzor]

好的，感谢 ?Ц ***@***.***  

…

------------------ 原始邮件 ------------------ 发件人: "Leecason/element-tiptap" ***@***.***>; 发送时间: 2023年4月10日(星期一) 晚上7:25 ***@***.***>; ***@***.******@***.***>; 主题: Re: [Leecason/element-tiptap] 从文件拖拽图片到富文本框以及复制图片到文本框，都会跳过上传服务器，仍然显示的是base64格式 (Issue #455) https://www.codemzy.com/blog/tiptap-pasting-images 可以参考这篇文章关于粘贴图片的自定义 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Willy-Woncat]

pasteImg(s) {
      let pattern = /<img src="data:image\/.*?;base64,([^"]+)"[^>]*>/g
      const base64TextArr = []
      let matches = pattern.exec(s)
      if (matches) {
        while (matches) {
          const base64Text = matches[1]
          base64TextArr.push(base64Text)
          matches = pattern.exec(s)
        }
        const data = {}
        data.base64String = base64TextArr[0]
        // 上传操作
        upload(data).then(resp => {
          this.$nextTick(() => {
            pattern = /<img src="data:image\/.*?;base64,([^"]+)"/g
            this.content = s.replace(pattern, '<img src="api/' + 上传之后的url + '"')
          })
        })
      }
    }

在el-tiptap节点的onUpdate加上这个，就能将base64文本变成你所需要的

[Bloodcapillary]

pasteImg(s) {
      let pattern = /<img src="data:image\/.*?;base64,([^"]+)"[^>]*>/g
      const base64TextArr = []
      let matches = pattern.exec(s)
      if (matches) {
        while (matches) {
          const base64Text = matches[1]
          base64TextArr.push(base64Text)
          matches = pattern.exec(s)
        }
        const data = {}
        data.base64String = base64TextArr[0]
        // 上传操作
        upload(data).then(resp => {
          this.$nextTick(() => {
            pattern = /<img src="data:image\/.*?;base64,([^"]+)"/g
            this.content = s.replace(pattern, '<img src="api/' + 上传之后的url + '"')
          })
        })
      }
    }

在el-tiptap节点的onUpdate加上这个，就能将base64文本变成你所需要的

图片上面的气泡菜单应该怎么才能禁用呢，怎么直接{bubble: false}无效啊

[yun77op]

https://www.codemzy.com/blog/tiptap-pasting-images

可以参考这篇文章关于粘贴图片的自定义

onPaste可以使用这种方式绑定事件，但绑定onDrop后，如果从电脑里拖入图片到编辑器，却不会触发onDrop。可以参看 https://discuss.prosemirror.net/t/handle-image-drop-from-file-system/1195

扩展element-tiptap的Image的插件，如果通过handleDOMEvents下的drop可以监听原生drop事件

import { Image } from 'element-tiptap'
import { Plugin } from 'tiptap'

async function upload(file) {
  // upload file to server
}
export default class CustomImage extends Image {
  get plugins() {
    return [
      new Plugin({
        props: {
          handleDOMEvents: {
            drop(view, event) {
              event.preventDefault()

              const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length

              if (!hasFiles) {
                return
              }

              const images = Array.from(event.dataTransfer.files).filter(file => /image/i.test(file.type))

              if (images.length === 0) {
                return
              }

              event.preventDefault()

              const { schema } = view.state
              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })

              images.forEach(image => {
                upload(image).then(url => {
                  const node = schema.nodes.image.create({
                    src: url
                  })
                  const transaction = view.state.tr.insert(coordinates.pos, node)
                  view.dispatch(transaction)
                })

              })
            }
          }
        }
      })
    ]
  }
}