Intellij IDEA Plugin DEV (六)


3/16/2019 IDEA

插件需求分析

先来梳理下需求:

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

具体需求入下:

上传需求

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

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

上传完成后:

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

这里有 2 个设置:

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

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

// 让 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
2
3
4
  1. 如果不开启, 则只转为普通的 <a> 标签, 这样点击图片后, 能新开标签查看大图;
<a title="" href="http://xxxx" >![](http://xxxx)</a>
1

图片压缩

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

获取图片时是否压缩, 这个需要在 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 设置;

-w415 -w688

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

Aliyun OSS 控制台

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

刷新次数

  1. 5分钟刷新一次;
  2. 打开时刷新一次;
  3. 刷新按钮;
  4. 关闭后停止刷新任务;
Last Updated: 7/3/2019, 1:07:06 PM