IntelliJ IDEA 插件开发攻略：Markdown 图片上传至 Aliyun OSS

插件需求分析

先来梳理下需求:

开发一款插件将 Markdown 文档中的图片上传到 Aliyun OSS.

具体需求入下:

上传需求

解析所有 ![]() 图片标签:

  1. 如果图片在本地, 则上传到 Aliyun OSS;
  2. 如果以 http:// 或者 https:// 开头, 则根据设置判断是否上传 (迁移图片到 Aliyun OSS)

上传完成后:

  1. 根据设置将 ![](./03161253/xxx) 标签转换成 <a data-fancybox title="" href="http://xxxx" >![](./03161253/xxx)</a> 标签

这里有 2 个设置:

  1. 是否转换为 <a> 标签:
    1. 如果开启, 在判断是否显示大图 (这个主要针对 vuepress 构建的博客)
1
<a data-fancybox title="" href="http://xxxx">![](http://xxxx)</a>

且要修改 config.js 文件, 添加如下:

1
2
3
4
// 让 Vuepress 支持图片放大功能
['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js' }],
['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js' }],
['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css' }]
  1. 如果不开启, 则只转为普通的 <a> 标签, 这样点击图片后, 能新开标签查看大图;
1
<a title="" href="http://xxxx">![](http://xxxx)</a>

图片压缩

根据设置判断上传图片是否压缩, 给出百分比.

获取图片时是否压缩, 这个需要在 Aliyun OSS 端设置, 设置好后填入对应的 styleName

直接提供图片压缩的功能

作用范围:

  1. 当前选中的图片;
  2. 选中的目录中的所有图片;
  3. 整个项目中的图片;

备份图片

图片上传完成后, 将已上传的图片按照目录备份到 当前项目的主目录 中

插件作用范围

只会解析 Markdown 文档.
如果是单个文件, 只有是 Markdown 文档才会显示 upload to Aliyun OSS, 其他时候不可用;

注意:

文件树可以多选文件

当前选中 / 正在编辑的文件

  1. 在编辑视图中直接右键 –> upload to Aliyun OSS ;
  2. 在 Tools 菜单中 –> upload to Aliyun OSS ;
  3. 在文件树选中文件后右键 –> upload to Aliyun OSS ;

目录

  1. 在文件树目录上点击右键 –> upload to Aliyun OSS ;

项目

  1. 在整个项目上点击右键 –> upload to Aliyun OSS ;

提示和日志

每一步给出日志

  1. 解析标签时;
  2. 拿到图片路径;
  3. 上传;
  4. 上传成功后备份图片, 不成功不备份;
  5. 替换标签;

上传过程中给出进度条

所有操作完成后给出提示!

设置页

  1. Aliyun OSS 设置;

20241229154732_lQw5m47z.webp
20241229154732_mtyVTw4c.webp

  1. 标签替换选项设置;
  2. 图片压缩设置 (上传前后上传后);
  3. 图床迁移设置;

Aliyun OSS 控制台

  1. 当前存储总量
  2. 本月 Put 类请求
  3. 本月 Get 类请求
  4. SLA

刷新次数

  1. 5 分钟刷新一次;
  2. 打开时刷新一次;
  3. 刷新按钮;
  4. 关闭后停止刷新任务;