React Draft Wysiwyg 如何实现点击图片全屏展开功能？

你不需要修改现有通过createEntity+AtomicBlockUtils插入图片的逻辑，只需要在自定义原子块渲染的环节添加点击事件即可，具体分为两种实现路径：

路径1：自定义图片块渲染组件（推荐，可控性最高） #

步骤1：编写自定义图片块组件 #

给渲染的img标签直接绑定onClick事件，写入你的全屏展示逻辑：

const CustomImageBlock = (props) => {
  const { contentState, block } = props;
  // 读取你插入图片时存在entity里的图片信息
  const entity = contentState.getEntity(block.getEntityAt(0));
  const { src, alt } = entity.getData();

  const handleImgClick = () => {
    // 此处替换为你的全屏显示逻辑，比如唤起全屏弹窗、传入当前图片地址
    console.log("点击的图片地址：", src);
  };

  return (
    <img
      src={src}
      alt={alt || "图片"}
      onClick={handleImgClick}
      style={{ maxWidth: "100%", cursor: "pointer" }}
    />
  );
};

步骤2：给编辑器配置块渲染规则 #

在Editor组件的blockRendererFn属性中，匹配你插入的图片类型原子块，用上面的自定义组件渲染：

import { Editor } from "react-draft-wysiwyg";

<Editor
  editorState={editorState}
  onEditorStateChange={setEditorState}
  blockRendererFn={(block) => {
    if (block.getType() === "atomic") {
      const contentState = editorState.getCurrentContent();
      const entityKey = block.getEntityAt(0);
      if (entityKey) {
        const entity = contentState.getEntity(entityKey);
        // 此处的类型要和你创建图片entity时传入的type完全一致，示例为'IMAGE'
        if (entity.getType() === "IMAGE") {
          return {
            component: CustomImageBlock,
            editable: false
          };
        }
      }
    }
    return null;
  }}
/>

你原有插入图片的逻辑不需要修改，只要保证创建entity时的类型和上面的判断匹配即可，比如原有插入逻辑示例：

// 原有插入逻辑无需改动
const contentState = editorState.getCurrentContent();
const contentWithImgEntity = contentState.createEntity(
  "IMAGE", // 对应上面的类型判断
  "IMMUTABLE",
  { src: 你的图片地址, alt: 图片描述 }
);
const entityKey = contentWithImgEntity.getLastCreatedEntityKey();
const newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " ");
setEditorState(newEditorState);

路径2：事件委托实现（更简单，适合轻量场景） #

不需要修改编辑器内部配置，直接给编辑器的外层容器绑定点击事件，判断点击目标是否为图片即可：

const handleContainerClick = (e) => {
  if (e.target.tagName.toLowerCase() === "img") {
    const imgSrc = e.target.src;
    // 写入你的全屏显示逻辑
  }
};

// 外层容器绑定事件
<div onClick={handleContainerClick}>
  <Editor
    editorState={editorState}
    onEditorStateChange={setEditorState}
  />
</div>

注意该方案会捕获编辑器内所有图片的点击事件，如果编辑器内有其他非内容图片可能会误触发。

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