在Cherry Markdown编辑器中实现图片上传后自动插入AI描述内容的技术方案

在富文本编辑器开发中，处理图片上传并自动添加描述是一个常见需求。本文将详细介绍如何在Cherry Markdown编辑器中实现图片上传后自动插入AI生成的内容描述。

核心问题分析

当用户上传图片到Markdown编辑器时，通常需要完成两个关键操作：

1. 将图片文件上传到服务器获取URL
2. 在编辑器光标位置插入图片标记语法

但若要在图片标记后自动添加AI生成的描述内容，就面临一个技术难点：如何准确定位插入描述内容的位置。

解决方案演进

初始方案：获取光标位置

最初开发者尝试通过编辑器API获取当前光标位置：

const {line, ch} = cherry.getCodeMirror().getCursor();
cherry.insert('描述内容', false, [line, ch]);

这种方法存在明显缺陷：

• 图片上传是异步操作，获取的光标位置可能已变化
• 用户可能通过多种方式上传图片（拖拽、粘贴等），导致光标位置不一致

优化方案：回调参数扩展

更完善的解决方案是扩展上传回调函数的参数，支持在图片标记前后插入内容：

callback(res.url, {
  before: '前置内容', 
  after: '后置内容'
});

这种设计具有以下优势：

1. 编辑器内部处理位置逻辑，避免外部获取光标位置不准确
2. 统一处理各种上传方式（拖拽、粘贴等）
3. 支持在图片前后都插入内容，灵活性更高

实现细节

完整的上传函数实现示例：

async function fileUpload(file, callback) {
  const [res, newAlt] = await Promise.all([
    uploadFile(file),
    ImageAltByAi(file) // AI生成描述
  ]);
  
  callback(res.url, {
    after: `\n:::ai-content\n${newAlt}\n:::\n` 
  });
}

最佳实践建议

1. 内容格式化：建议将AI生成的内容用特定语法包裹（如:::ai-content），便于后续处理
2. 异步处理：确保所有异步操作（上传和AI生成）都完成后才执行插入
3. 错误处理：添加适当的错误处理逻辑，避免上传失败导致编辑器状态异常
4. 性能优化：对于大图片，可以考虑先插入占位符，等AI生成完成后再更新内容

扩展思考

这种设计模式不仅适用于图片描述，还可以应用于：

• 自动生成图片标题
• 添加版权信息
• 插入图片相关标签
• 添加图片说明文档链接

通过回调参数扩展的方式，为编辑器功能扩展提供了清晰的接口规范，是插件化设计的一个良好实践。