Cherry-Markdown 图片 URL 处理机制深度解析

问题背景

在 Cherry-Markdown 编辑器中，开发者发现了一个关于图片 URL 处理的重要问题：当使用 Markdown 标准语法插入图片时（如 ![](a.jpg)），系统能够正确触发 urlProcessor 回调函数；然而当使用 HTML 的 <img> 标签时（如 <img src="b.jpg">），该回调却不会被触发。

技术影响分析

这个问题在实际应用中会产生严重影响，特别是对于以下两种常见场景：

1. 相对路径处理：许多服务使用相对路径引用图片资源，需要经过 URL 处理器转换为绝对路径才能正确显示
2. 本地文件处理：当编辑器处理本地文件系统中的图片时，必须通过 URL 处理器将本地路径转换为可访问的 URL

深入技术原理

Cherry-Markdown 的 URL 处理机制主要包含以下关键点：

1. Markdown 语法解析：系统内置了对标准 Markdown 图片语法的解析和回调触发
2. HTML 标签处理：对于 HTML 原生标签，系统默认采用不同的处理流程
3. 同步处理限制：当前的 urlProcessor 实现是同步的，无法处理异步 URL 转换需求

临时解决方案

在官方修复前，开发者可以采用以下临时方案：

1. 预加载映射表：

   • 在初始化编辑器前，预先扫描文档中的所有图片 URL
   • 通过异步请求获取这些 URL 对应的最终访问地址
   • 建立原始 URL 到处理后的 URL 的映射表
   • 在 urlProcessor 中使用该映射表进行替换

2. 自定义语法钩子：

   const customBlockHookWithImg = Cherry.createSyntaxHook('replaceImgBlock', Cherry.constants.HOOKS_TYPE_LIST.PAR, {
     afterMakeHtml(str) {
       return str.replace(this.RULE.reg, (match, srcValue) => {
         const processedUrl = urlMapping[srcValue] || srcValue;
         return match.replace(srcValue, processedUrl);
       });
     },
     rule() {
       return {reg: /<img\s+[^>]*src="([^"]+)"[^>]*>/gi};
     }
   });
   

性能优化建议

针对频繁触发的问题，建议：

1. 建立 URL 缓存：维护一个已处理 URL 的缓存字典，避免重复处理
2. 差异检测：比较新旧内容，只处理新增或修改的图片 URL
3. 节流处理：对高频编辑操作进行适当的节流控制

未来改进方向

根据官方回应，Cherry-Markdown 计划在后续版本中：

1. 增强对 HTML <img> 标签的 urlProcessor 支持
2. 提供异步回调支持，允许在处理器中进行网络请求
3. 优化触发机制，减少不必要的处理开销

最佳实践建议

1. 对于需要 URL 转换的场景，优先使用 Markdown 标准语法
2. 复杂项目建议预先处理图片资源，减少运行时转换需求
3. 密切关注官方更新，及时升级到支持异步处理的版本

通过深入理解 Cherry-Markdown 的图片处理机制，开发者可以更好地规避当前限制，同时为未来的升级做好准备。