求助：Remirror编辑器ImageExtension的uploadHandler使用示例

核心实现步骤 #

不需要纠结未导出的类型，直接通过类型推断或手动定义uploadHandler结构即可，以下是完整可运行示例：

1. 安装必要依赖 #

确保已安装Remirror核心及相关扩展：

npm install remirror @remirror/react @remirror/extension-image

2. 完整组件代码 #

import { useEditor, Remirror, EditorComponent } from '@remirror/react';
import { ImageExtension } from '@remirror/extension-image';

const ImageUploadEditor = () => {
  // 自定义上传处理函数，替换为你的实际上传逻辑
  const customUploadHandler = async (file: File) => {
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await fetch('/api/upload-image', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error('上传失败');
      }

      const data = await response.json();
      // 返回图片的在线访问地址
      return { src: data.imageUrl };
    } catch (error) {
      console.error('上传出错:', error);
      // 上传失败返回占位图，或抛出错误让编辑器显示默认错误状态
      return { src: 'https://via.placeholder.com/150?text=上传失败' };
    }
  };

  const extensions = () => [
    new ImageExtension({
      uploadHandler: customUploadHandler,
      // 显式开启拖拽上传（默认已开启）
      enableDrop: true,
      // 可选：开启粘贴上传
      enablePaste: true,
    }),
  ];

  const { manager } = useEditor({ extensions });

  return (
    <Remirror manager={manager}>
      <EditorComponent />
    </Remirror>
  );
};

export default ImageUploadEditor;

3. 关键说明 #

• uploadHandler规则：接收File对象，异步处理后返回包含src字段的对象，该字段即为图片上传后的在线地址。
• TypeScript类型兼容：如果使用TS，可手动定义类型规避未导出问题：

type UploadHandler = (file: File) => Promise<{ src: string }>;

直接给customUploadHandler添加该类型即可。

• 错误处理：上传失败时，可返回占位图URL或直接抛出错误，编辑器会自动处理错误状态。

4. 后端接口示例（可选） #

配合前端的Node.js/Express简单示例：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload-image', upload.single('image'), (req, res) => {
  // 生产环境建议替换为云存储（如OSS、S3）地址
  const imageUrl = `http://localhost:3000/uploads/${req.file.filename}`;
  res.json({ imageUrl });
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

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