CodingYang

vuePress-theme-reco Rackar    2018 - 2024
CodingYang CodingYang

Choose mode

  • dark
  • auto
  • light
首页
类别
  • 技术
  • 个人
  • 思考
  • 儿童
标签
时间线
联系
  • 关于
  • RSS订阅 (opens new window)
  • GitHub (opens new window)
  • 简书 (opens new window)
  • CSDN (opens new window)
  • WeChat (opens new window)
GitHub (opens new window)
author-avatar

Rackar

67

文章

44

标签

首页
类别
  • 技术
  • 个人
  • 思考
  • 儿童
标签
时间线
联系
  • 关于
  • RSS订阅 (opens new window)
  • GitHub (opens new window)
  • 简书 (opens new window)
  • CSDN (opens new window)
  • WeChat (opens new window)
GitHub (opens new window)
  • Markdown快速插入图片

    • 介绍
      • 安装配置插件
        • 使用方法
          • 注意事项
            • 源代码库
              • 参考资料

              Markdown快速插入图片

              vuePress-theme-reco Rackar    2018 - 2024

              Markdown快速插入图片


              Rackar 2020-03-26 工具

              之前两篇文章介绍了VS Code 写作介绍 (opens new window)和七牛云图床申请 (opens new window),接下来再说一下怎么使用插件便捷在文章中插入图片。

              # 介绍

              本插件可以用四种方式上传图片到七牛云存储,并将外链图片标签写回 md 文件。方式包括本地上传,本地/远程图片路径、截图粘贴和右键菜单。

              还有一个设置图片在本机同目录下保存还是上传七牛云的开关。

              # 安装配置插件

              VS Code 插件中搜索 markdown-image 就可以找到。点击 Install 安装。或者使用快捷键Ctrl+P,键入 ext install markdown-image

              如果需要自动上传到七牛图床做外链,按照下面的方式进行配置。否则可以跳过。

              首先配置七牛云参数,也就是上面第二篇文章中记录下来的外链地址、AK、SK、存储名称。

              点击文件 → 首选项 → 设置(快捷键 Ctrl + Shift +P open user settings),在用户页找到扩展 → qiniu configuration。

              1585190944532

              这里填入各项配置:

              {
                  // 插件开关,默认打开
                  "qiniu.enable": true,
              
                  // 上传开关。如关闭则会复制图片到本机,位置为本项目中location。点击上传开关按钮会修改本值。
                  "qiniu.uploadEnable": true,
              
                  // 你的七牛AK: AccessKey
                  "qiniu.access_key": "*****************************************",
              
                  // 你的七牛SK: SecretKey
                  "qiniu.secret_key": "*****************************************",
              
                  // 你的七牛存储名称
                  "qiniu.bucket": "i-am-pic",
              
                  // 你的七牛外链地址。注意需要以http://作为开头。
                  "qiniu.domain": "http://xxxxx.xxxx.com",
              
                  // 远程文件命名方式。参数化命名,暂时支持 ${fileName}、${mdFileName}、${date}、${dateTime}
                  // 示例:
                  //   ${mdFileName}-${dateTime} -> markdownName-20170412222810.jpg
                  "qiniu.remotePath": "${fileName}",
              
                  // 截图方式图片本地保存路径(因为七牛的api限制,截图上传是先将黏贴板里的图片存储到本地,然后再根据这个路径上传图片
                  "qiniu.location": "./img"
              }
              
              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27

              修改以后会自动保存。设置完成后就可以开始使用了。

              # 使用方法

              打开 .md 文件后,左下角状态栏有 3 个按钮和一个开关。开关用于切换图片文件保存到本机路径还是上传七牛云。按钮功能如下:

              1585790341995-2020429192.png

              1. img 截图 剪贴板内的截图上传。快捷键: Ctrl + Alt +8

                支持 qq,微信等工具的截图功能,会自动在本目录保存图片并上传云端。由于截图是保存在剪贴板,其他复制操作会覆盖截图。

              jietu

              1. img 本地 直接弹框选择本机图片上传。快捷键:Ctrl + Alt +9

              benji

              1. img 远程 粘贴本地图片路径或远程图片 URL 上传。快捷键:Ctrl + Alt +0

              path

              1. 右键添加 在左侧项目资源管理器中对图片文件右键,选择“将图片加入到 Markdown 文件中”。

              youjian-20204292214.gif

              上传成功后,插件会自动返回图片外链地址,并在光标处插入图片代码。如:

              ![filename](http://img.codingyang.com/filename-2020326111524.png)
              
              1

              云端文件命名会根据你设置的参数化命名方式。

              # 注意事项

              1. 只有在编辑 Markdown 文件时插件才可使用。
              2. VS Code 在预览界面默认不加载 http 请求的图片,而七牛免费云图床使用 http 协议。要按照下图点击允许请求才能正常预览外链图片。

              tu2

              # 源代码库

              本插件源码地址:

              https://github.com/Rackar/md-image-code-ext

              欢迎报告 Bug、建议以及 PR。

              # 参考资料

              本插件核心代码参考了下面 3 个库,修改为 qiniu 7.3.0 版 API 的用法,改为 TypeScript 版本。支持开源,尊重原创。

              https://github.com/favers/vscode-qiniu-upload-image (opens new window)

              https://github.com/yscoder/vscode-qiniu-upload-image (opens new window)

              https://github.com/gityangge/vscode-qiniu-upload-image-plus (opens new window)

              参与编辑此文章 (opens new window)
              更新于: 4/8/2020, 2:52:52 PM