最近一直在用 Atom 寫寫markdown毙芜，但無(wú)奈上傳圖片真實(shí)太麻煩了。找了好幾個(gè)插件都是要用到 七牛 的賬號(hào)，由于之前被七帕肝耄坑過一次蚊荣，就沒再想用他的打算了。一度放棄后使用在線的markdown莫杈，例如簡(jiǎn)書 掘金 這些互例，可感覺用起來(lái)還是不太舒服，最終還是折騰起atom插件了筝闹。

正好之前有建了個(gè)圖床站還順帶出了個(gè)iOS的App 米米圖床 （我是奸商我收費(fèi)）

也寫過一篇相關(guān)的文章 iOS開發(fā)-RAC+MVVM練手項(xiàng)目 圖床App

項(xiàng)目簡(jiǎn)介

由于自己有圖床 目前使用的是 Chevereto媳叨，
本文所涉及到內(nèi)容都是根據(jù) 此API文檔

所以這款插件只為解決幾個(gè)問題

• 使用自己圖床的API
• 上傳圖片獲得URL

功能分析

功能灰常簡(jiǎn)單

• 獲取剪切板圖片數(shù)據(jù)
• 通過post上傳至圖床API獲得回調(diào)數(shù)據(jù)
• 生成markdown圖片內(nèi)容

image

根據(jù)API文檔 我們用 Postman 測(cè)一下API 看看回調(diào)

image

嗯 回調(diào)的內(nèi)容很多，我們就挑一個(gè)display_url這個(gè)字段吧关顷，夠用就行糊秆。

代碼實(shí)現(xiàn)

用的是coffeescript代碼

第三方依賴 request

image

module.exports =
  # setting 中的全局變量
  config:
    Api:
      title: "Your api url"
      description: "Input your api url like `https://xxx.com/api/1/upload`"
      type: 'string'
      default: "https://imgurl.xyz/api/1/upload"
    ApiKey:
      title: "ApiKey"
      description: "Input your api key, you can find it in your dashboard, default is my key ,Do not mark sure always available"
      type: 'string'
      default: "a7bb2b091e3f2961e59551a8cf6e05b2"

  activate: (state) ->
    @attachEvent()

  attachEvent: ->
    workspaceElement = atom.views.getView(atom.workspace)
    workspaceElement.addEventListener 'keydown', (e) =>
      # cmd + paste
      if (e.metaKey && e.keyCode == 86)
        # clipboard readImage
        clipboard = require('clipboard')
        img = clipboard.readImage()
        return if img.isEmpty()

        clipboard.writeText('')

        # insert loading text
        editor = atom.workspace.getActiveTextEditor()
        range = editor.insertText('uploading...');

        @postToImgur img, (imgUrl) ->
          # replace loading text to markdown img format
          markdown = "![](#{imgUrl})"
          editor.setTextInBufferRange(range[0], markdown)

  postToImgur: (img, callback) ->

    req = require('request')
    options = {
      uri: atom.config.get('image-copy-chevereto.Api')
      formData: {
        action : 'upload'
        key : atom.config.get('image-copy-chevereto.ApiKey')
        source : img.toPNG().toString('base64')
      }
      json: true
    }
    req.post options, (error, response, body) ->
      if (!error && response.statusCode == 200)
        callback(body.image.display_url) if callback && body.image.display_url
      else
        callback('error ')

項(xiàng)目地址

插件中默認(rèn)使用的apiurl和key都是自己的 不保證會(huì)完全變，有條件的建議還是使用自己的apiurl和key 還有议双。痘番。。暫不支持gif

插件安裝：直接Atom perference->install 中搜索 image-copy-chevereto即可

插件地址：https://atom.io/packages/image-copy-chevereto

gayhub地址: https://github.com/gongxiaokai/image-copy-chevereto

歡迎點(diǎn)贊~

image