Bug: 在 Safari 浏览器中 customUpload 自定义上传图片会被转为 base64 格式

[Zzhangzewu]

在ios safar浏览器中 customUpload自定义上传图片会被转为base64格式

[wjw020206]

你好，请问一下在 Android 的浏览器中上传相同的图片也会被转换为 base64 格式吗？
麻烦再提供一下 IOS 的版本号以及 wangEditor-next 的版本号

[Zzhangzewu]

wangEditor-next是5.6.14版本 ios版本是最新的

[Zzhangzewu]

不是IOS 是苹果笔记本的safar浏览器中 其他浏览器都是正常的

[Zzhangzewu]

@wjw020206 在sarfari浏览器中复制粘贴进富文本编辑器中的图片并没有走customUpload方法 并且转为base64格式图片后img alt="image.png"
这是我下载源码后排查了一些可能出现问题的两处，您可以看看

if (IS_SAFARI) {
      const blobUrl = extractBlobUrlFromImg(html)

      if (blobUrl) {
        const base64Data = await convertBlobUrlToBase64(blobUrl)

        if (base64Data) {
          html = `<img src="${base64Data}" alt="image.png">`

          URL.revokeObjectURL(blobUrl)
        }
      }
    }

case 'insertText': {
      console.log(type,'insertFromPaste',isDataTransfer(data),'isDataTransfer',data,'data');
      if (type === 'insertFromPaste') {
        if (!EDITOR_TO_CAN_PASTE.get(editor)) { break } // 不可默认粘贴
      }

      if (isDataTransfer(data)) {
        // 这里处理非纯文本（如 html 图片文件等）的粘贴。对于纯文本的粘贴，使用 paste 事件
        editor.insertData(data)
      } else if (typeof data === 'string') {
        Editor.insertText(editor, data)
      }
      break
    }

[wjw020206]

@wjw020206 在sarfari浏览器中复制粘贴进富文本编辑器中的图片并没有走customUpload方法 并且转为base64格式图片后img alt="image.png" 这是我下载源码后排查了一些可能出现问题的两处，您可以看看

if (IS_SAFARI) {
const blobUrl = extractBlobUrlFromImg(html)

  if (blobUrl) {
    const base64Data = await convertBlobUrlToBase64(blobUrl)

    if (base64Data) {
      html = `<img src="${base64Data}" alt="image.png">`

      URL.revokeObjectURL(blobUrl)
    }
  }
}

case 'insertText': {
console.log(type,'insertFromPaste',isDataTransfer(data),'isDataTransfer',data,'data');
if (type === 'insertFromPaste') {
if (!EDITOR_TO_CAN_PASTE.get(editor)) { break } // 不可默认粘贴
}

  if (isDataTransfer(data)) {
    // 这里处理非纯文本（如 html 图片文件等）的粘贴。对于纯文本的粘贴，使用 paste 事件
    editor.insertData(data)
  } else if (typeof data === 'string') {
    Editor.insertText(editor, data)
  }
  break
}

你好，其实这个问题跟之前的 #70 算是同一个问题
问题的根本原因是 Safari 浏览器的 beforeinput 事件的 DataTransfer 与 Chrome、Firefox 实现存在差异，具体可以参考 w3c/input-events#120

[wjw020206]

目前大概的执行流程：

1. 复制图片
2. 粘贴图片
3. 触发 beforeinput 事件

从这里开始 Safari 就表现出跟其它浏览器不一样的地方了，当时我追踪这个问题追了一个下午

• 在Chrome 中的拿到的
  

• 在 Safari 中拿到的
  

Safari 的 beforeinput 事件的 DataTransfer 存在差异

[Zzhangzewu]

那这个问题目前有可修复的方法吗

[wjw020206]

那这个问题目前有可修复的方法吗

目前在 Safari 中 beforeinput 拿不到文件对象，导致无法判断，暂时没想到什么好的方案，看过其它的编辑器似乎用的不是 beforeinput 来读取粘贴的文件的

[Zzhangzewu]

那这个问题目前有可修复的方法吗

目前在 Safari 中 beforeinput 拿不到文件对象，导致无法判断，暂时没想到什么好的方案，看过其它的编辑器似乎用的不是 beforeinput 来读取粘贴的文件的

好的明白了，麻烦您了

[wjw020206]

那这个问题目前有可修复的方法吗

目前在 Safari 中 beforeinput 拿不到文件对象，导致无法判断，暂时没想到什么好的方案，看过其它的编辑器似乎用的不是 beforeinput 来读取粘贴的文件的

好的明白了，麻烦您了

有在 slate 仓库的 issue 看到过有人讨论这个问题，以下是翻译的结果
ianstormtaylor/slate#4465

[liuning89757]

那这个问题目前有可修复的方法吗

目前在 Safari 中 beforeinput 拿不到文件对象，导致无法判断，暂时没想到什么好的方案，看过其它的编辑器似乎用的不是 beforeinput 来读取粘贴的文件的

是否可以考虑在paste事件处理时，直接使用clipboardData的数据，让safari回退到不支持 beforeInput 的场景？

    if ( !IS_SAFARI && HAS_BEFORE_INPUT_SUPPORT && !isPlainTextOnlyPaste(event))
        return;
    event.preventDefault();
    var data = event.clipboardData;
    if (data == null)
        return;
    editor.insertData(data);

[wjw020206]

那这个问题目前有可修复的方法吗

目前在 Safari 中 beforeinput 拿不到文件对象，导致无法判断，暂时没想到什么好的方案，看过其它的编辑器似乎用的不是 beforeinput 来读取粘贴的文件的

是否可以考虑在paste事件处理时，直接使用clipboardData的数据，让safari回退到不支持 beforeInput 的场景？

    if ( !IS_SAFARI && HAS_BEFORE_INPUT_SUPPORT && !isPlainTextOnlyPaste(event))
        return;
    event.preventDefault();
    var data = event.clipboardData;
    if (data == null)
        return;
    editor.insertData(data);

你，我的朋友，你才是真正的大佬，按你说的好像可以了

[cycleccc]

已发布 5.6.30