Vditor编辑器实现本地图片相对路径引用的技术方案

背景介绍

Vditor作为一款强大的Markdown编辑器，在在线编辑场景下表现优异。然而在处理本地Markdown文件时，开发者发现其无法直接解析和显示文档中通过相对路径引用的本地图片资源。这一问题在需要离线编辑或处理本地文档时尤为突出。

问题分析

现代浏览器通过文件系统API已经具备了强大的本地文件读写能力，这为处理本地图片资源提供了技术基础。Vditor目前提供的两种自定义渲染方式（customRenders和SetJSRenders）虽然强大，但无法在三种编辑模式（WYSIWYG、SV、IR）下统一处理图片预览前的回调逻辑。

技术解决方案

核心思路

实现本地图片相对路径引用的关键在于：

1. 获取用户对相关目录的访问权限
2. 读取图片文件数据
3. 转换为base64或blob格式
4. 将处理后的数据返回给渲染流程

具体实现方案

方案一：自定义渲染函数

可以通过实现一个renderImage函数来处理图片链接：

function renderImage(desc: string, link: string): string {
    // 判断是否为相对路径
    if (isRelativePath(link)) {
        // 请求文件系统访问权限
        // 读取图片文件
        // 转换为base64
        return `data:image/png;base64,...`;
    }
    return link;
}

方案二：预处理输入内容

在内容输入阶段对图片链接进行预处理：

vditor.on('input', (content) => {
    const processed = processRelativeImages(content);
    // 更新编辑器内容
});

实现细节

1. 权限获取：使用File System Access API请求用户授权
2. 路径解析：正确处理不同操作系统的路径格式
3. 图片处理：支持多种图片格式的读取和转换
4. 缓存机制：对已处理的图片进行缓存，提升性能

注意事项

1. 浏览器安全限制：某些API可能需要用户主动交互才能触发
2. 性能考虑：大图片处理需要注意内存使用
3. 错误处理：完善的错误处理机制保证用户体验

总结

通过合理利用现代浏览器API，Vditor完全可以实现对本地图片相对路径引用的支持。这不仅能提升离线编辑体验，也为开发者处理本地文档提供了更多可能性。实现时需要注意浏览器兼容性和性能优化，确保在各种场景下都能稳定工作。