Markdown 编辑器图片上传优化：自动转换为 HTML 标签

背景

在使用 react-markdown-editor-lite 组件时，默认的图片上传行为会插入标准 Markdown 语法 ![filename](url)。由于标准 Markdown 不支持直接定义图片样式（如宽度限制），上传大图时容易导致图片溢出容器或显示过大。

解决方案

为了在保持上传流程顺畅的同时控制图片样式，我们采用了 “先插入默认格式，再异步替换为 HTML” 的策略：

1. 上传图片：调用后端接口上传文件。

2. 默认插入：Promise resolve 返回图片 URL，允许编辑器按默认行为插入 ![name](url)。

3. 格式替换：利用 setTimeout 将操作推入下一个事件循环，在编辑器状态更新后，立即将生成的 Markdown 字符串替换为带有 style="max-width: 100%;" 的 HTML <img> 标签。

代码实现

const handleImageUpload = file => {

  setMdEditorLoading(true);




  return new Promise((resolve, reject) => {

    const formData = new FormData();

    // ... 组装 FormData ...

    formData.append('file', file);

    // ... 其他参数 ...




    dispatch({

      type: 'detailedAnalysisOfBusinessImpact/uploadAttachment',

      payload: formData,

    })

      .then(res => {

        setMdEditorLoading(false);

        

        // 1. 让编辑器先插入默认的 Markdown 格式: ![filename](url)

        // 这一步是为了保证编辑器内部状态的正常流转

        resolve(res);




        // 2. 异步将 Markdown 格式替换为带样式的 img 标签

        setTimeout(() => {

          setNoteDesc(prevDesc => {

            // 构造刚才编辑器自动生成的 markdown 字符串

            const defaultMarkdown = `![${file.name}](${res})`;

            // 构造目标 HTML 字符串，添加 max-width 防止溢出

            const targetHtml = `<img src="${res}" alt="${file.name}" style="max-width: 100%;" />`;

            

            // 执行替换

            return prevDesc.replace(defaultMarkdown, targetHtml);

          });

        }, 0);

      })

      .catch(error => {

        setMdEditorLoading(false);

        reject(error);

      });

  });

};