md-editor-v3 图片上传功能优化：支持自定义图片名称显示

md-editor-v3 图片上传功能优化：支持自定义图片名称显示

在markdown编辑器中，图片上传是一个常用功能。md-editor-v3作为一款优秀的markdown编辑器，近期对其图片上传功能进行了重要优化，解决了用户在实际使用中遇到的一个痛点问题。

问题背景

在之前的版本中，当用户通过md-editor-v3上传图片时，生成的markdown代码格式为![](图片URL)。这种格式虽然简洁，但在编辑包含多张图片的文档时，用户无法直观地区分不同图片，因为所有图片都显示为相同的空描述文本。

解决方案

md-editor-v3在4.12.0版本中对此进行了改进，现在支持在上传图片时自定义图片名称显示。更新后，生成的markdown代码可以显示为![自定义名称](图片URL)的格式，大大提升了文档的可读性和编辑便利性。

技术实现

要实现这一功能，开发者需要对图片上传回调函数进行调整。以下是关键代码示例：

const onUploadImg = async (files, callback) => {
  const res = await Promise.all(
    files.map((file) => {
      return new Promise((resolve) => {
        // 上传逻辑
        uploadFile(file).then(result => {
          // 返回包含名称和URL的对象
          resolve({
            url: result.url,
            name: file.name // 使用原始文件名或自定义名称
          });
        });
      });
    })
  );
  callback(res);
}

使用建议

1. 保持名称简洁：虽然可以自定义名称，但建议保持简短明了
2. 考虑SEO：如果是公开文档，可以在名称中加入适当的关键词
3. 一致性：在整个文档中使用统一的命名规则
4. 特殊字符处理：注意避免在名称中使用可能引起markdown解析问题的特殊字符

总结

md-editor-v3的这一改进体现了其对用户体验的持续关注。通过支持图片名称显示，不仅解决了多图管理的难题，也为文档的后期维护和协作编辑带来了便利。对于需要频繁插入图片的markdown用户来说，这无疑是一个值得升级的重要功能改进。