React Draft Wysiwyg的onPaste事件无法获取剪贴板信息问题求助

根因说明 #

React Draft Wysiwyg 封装的onPaste回调存在两个容易踩的设计点，导致你直接取clipboardData返回undefined：

• onPaste回调的第一个返回值是粘贴的纯文本内容，第二个参数才是对应的事件对象，你之前只接收了第一个参数，自然没有剪贴板相关属性
• React 合成事件不会把原生浏览器属性直接挂载到事件对象上，原生剪贴板数据需要访问事件对象的nativeEvent子属性获取

修复步骤 #

1. 调整Editor组件的onPaste绑定逻辑 #

修改参数接收规则，拿到正确的事件对象：

<Editor
  toolbarOnFocus
  // 新增第二个参数接收事件对象
  onPaste={(pastedText, event) => this.Copy_Paste_Pictures_PO(event)}
  toolbarClassName='toolbar-class-new'
  editorClassName={"toolbar-editor-class"}
  onEditorStateChange={this.onEditorStateChange_PO}
/>

2. 调整剪贴板数据获取逻辑 #

在你的Copy_Paste_Pictures_PO方法中，从原生事件属性取剪贴板数据：

Copy_Paste_Pictures_PO = (event) => {
  // 阻止默认粘贴行为可选，如果你需要完全自定义粘贴逻辑可以开启
  // event.preventDefault();
  const clipboardData = event.nativeEvent.clipboardData;
  // 此处可以添加你的业务逻辑，比如遍历clipboardData.items获取粘贴的文本、图片等资源
  console.log(clipboardData)
}

粘贴图片额外提示 #

如果需要处理粘贴的图片资源，可以用以下逻辑遍历剪贴板内容：

const items = clipboardData.items;
for (let i = 0; i < items.length; i++) {
  if (items[i].type.indexOf('image') !== -1) {
    const imageBlob = items[i].getAsFile();
    // 此处可以处理图片上传、插入编辑器等逻辑
  }
}

内容的提问来源于stack exchange，提问作者user13990170