React - 拖放图片上传到 Draft JS Wysiwyg答案

【问题标题】：React - Drag'n'Drop Image upload into DraftJS WysiwygReact - 拖放图片上传到 Draft JS Wysiwyg
【发布时间】：2023-02-06 21:04:28
【问题描述】：

我已经在我的表单中实现了 DraftJS Wysiwyg HTML 编辑器，包括拖放插件，它运行良好。请参阅下面的当前实施。

我想要实现的是，我想通过将图像放入整个编辑器来触发图像上传，而不仅仅是放入'拖放文件或点击上传'窗户

如何编辑解决方案以实现这一目标？

Current solution

jsx

const [editorState, setEditorState] = React.useState(
  EditorState.createEmpty()
);

const onEditorStateChange = (newState) => {
  setEditorState(newState);
  const htmlValue = draftToHtml(
    convertToRaw(editorState.getCurrentContent())
  );
  setInputs({ id: props.id, value: htmlValue });
};

const uploadImageCallBack = (file) => {
  const imageObject = {
    file: file,
    localSrc: URL.createObjectURL(file),
  };
  addImage(imageObject);
  return new Promise((resolve, reject) => {
    resolve({ data: { link: imageObject.localSrc } });
  });
};

...      
<Editor
  editorState={editorState}
  onEditorStateChange={onEditorStateChange}
  readOnly={props.disabled}
  plugins={[dndFileUploadPlugin]}
  toolbar={{
    image: {
      uploadCallback: uploadImageCallBack,
      previewImage: true,
      alt: { present: true, mandatory: false },
      inputAccept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
    },
  }}
/>

我还没有找到任何可以帮助我解决这个问题的资源

【问题讨论】：

标签： reactjs draftjs react-draft-wysiwyg

【解决方案1】：

尝试使用 Editor 的 onDrop 函数。

处理该放置事件并将图像传递给您的uploadImageCallBack 函数：

const handleEditorDrop = (e) => {
  e.preventDefault();
  if (e.dataTransfer.files.length > 0) {
    const file = e.dataTransfer.files[0];
    if (file.type.startsWith("image")) {
      uploadImageCallBack(file);
    }
  }
};

<Editor
  ...
  onDrop={handleEditorDrop}
  ...
/>

【讨论】：