react-draft-wysiwyg图片Base64字符串溢出上传框问题求助

问题核心 #

你尝试截断Base64字符串导致编辑器识别无效URL，而实际需求是显示简短文本但保留完整Base64用于提交。编辑器需要有效的图片URL才能正常渲染，不能直接修改返回的链接，应通过样式或自定义组件处理显示。

方案一：CSS样式截断（最简方案） #

直接给上传输入框添加文本溢出截断样式，无需修改逻辑：

/* 在全局样式或组件样式中添加 */
.rdw-image-modal .rdw-image-url-input {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

该样式会让过长的Base64字符串在输入框内自动截断并显示省略号，同时编辑器仍能正常识别完整的Base64 URL。

方案二：自定义图片上传工具栏（显示文件名而非Base64） #

如果需要显示更友好的文本（比如图片文件名），可以自定义图片上传回调和工具栏逻辑：

1. 修改uploadCallback，保留完整Base64，同时记录文件名：

uploadCallback: (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      const dataURL = reader.result;
      // 返回完整的dataURL，同时保存文件名
      resolve({ data: { link: dataURL } });
      setCurrentImageFileName(file.name);
    };
    reader.onerror = (error) => {
      reject(error);
    };
  });
}

2. 自定义图片模态框的URL输入部分：

import { ImageModal } from 'react-draft-wysiwyg';

// 自定义模态框组件
const CustomImageModal = (props) => {
  return (
    <ImageModal
      {...props}
      urlInputProps={{
        // 显示文件名而非Base64
        value: currentImageFileName || props.url,
        // 保持原提交逻辑不变
        onChange: (e) => props.onUrlChange(e.target.value)
      }}
    />
  );
};

// 在Editor组件中使用自定义模态框
<Editor
  editorState={editorState}
  onEditorStateChange={handleEditorChange}
  toolbar={{
    image: {
      uploadCallback: yourUploadCallback,
      alt: { present: true, mandatory: false },
      modal: CustomImageModal
    }
  }}
/>

方案三：优化状态管理，确保提交时用完整Base64 #

你的handleEditorChange中已经在获取完整的图片URL，确保imageFile始终存储完整的Base64字符串即可，显示问题交给方案一或二处理：

const handleEditorChange = (state) => {
  setEditorState(state);
  const content = state.getCurrentContent();
  const selection = state.getSelection();
  const selectedBlock = content.getBlockForKey(selection.getStartKey());
  const selectedEntityKey = selectedBlock.getEntityAt(selection.getStartOffset());
  
  if (selectedEntityKey) {
    const entity = content.getEntity(selectedEntityKey);
    if (entity.getType() === 'IMAGE') {
      const imageUrl = entity.getData().url;
      setImageFile(imageUrl); // 存储完整的Base64
    }
  } else {
    setImageFile(null);
  }
};

关键注意点 #

• 不要修改uploadCallback返回的link值，编辑器需要有效的图片URL才能正确渲染图片。
• 显示层面的问题优先用CSS解决，简单高效；需要更定制化的显示再考虑自定义组件。
• 提交时确保imageFile存储的是完整的Base64字符串，你的现有逻辑已经满足这一点，只要不截断返回的URL即可。

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