查看: 135|回复: 0

[JavaScript/JQuery] Atom插件开发-使用自己的Chevereto图床API

发表于 2018-5-12 08:00:02
Atom插件开发-使用自己的Chevereto图床API

最近一直在用 Atom 写写markdown,但无奈上传图片真实太麻烦了。找了好几个插件都是要用到 七牛 的账号,由于之前被七牛坑过一次,就没再想用他的打算了。一度放弃后使用在线的markdown,例如简书 掘金 这些,可感觉用起来还是不太舒服,最终还是折腾起atom插件了。

正好之前有建了个图床站还顺带出了个iOS的App 米米图床 (我是奸商我收费)

也写过一篇相关的文章 ios开发-RAC+MVVM练手项目 图床App

项目简介

由于自己有图床 目前使用的是 Chevereto,
本文所涉及到内容都是根据 此API文档

所以这款插件只为解决几个问题

使用自己图床的API 上传图片获得URL 功能分析

功能灰常简单

获取剪切板图片数据 通过post上传至图床API获得回调数据 生成markdown图片内容

根据API文档 我们用 Postman 测一下API 看看回调

嗯 回调的内容很多,我们就挑一个display_url这个字段吧,够用就行。

代码实现

用的是coffeescript代码

第三方依赖 request

  1. module.exports =
  2. # setting 中的全局变量
  3. config:
  4. Api:
  5. title: "Your api url"
  6. description: "Input your api url like `https://xxx.com/api/1/upload`"
  7. type: 'string'
  8. default: "https://imgurl.xyz/api/1/upload"
  9. ApiKey:
  10. title: "ApiKey"
  11. description: "Input your api key, you can find it in your dashboard, default is my key ,Do not mark sure always available"
  12. type: 'string'
  13. default: "a7bb2b091e3f2961e59551a8cf6e05b2"
  14. activate: (state) ->
  15. @attachEvent()
  16. attachEvent: ->
  17. workspaceElement = atom.views.getView(atom.workspace)
  18. workspaceElement.addEventListener 'keydown', (e) =>
  19. # cmd + paste
  20. if (e.metaKey && e.keyCode == 86)
  21. # clipboard readImage
  22. clipboard = require('clipboard')
  23. img = clipboard.readImage()
  24. return if img.isEmpty()
  25. clipboard.writeText('')
  26. # insert loading text
  27. editor = atom.workspace.getActiveTextEditor()
  28. range = editor.insertText('uploading...');
  29. @postToImgur img, (imgUrl) ->
  30. # replace loading text to markdown img format
  31. markdown = "![](#{imgUrl})"
  32. editor.setTextInBufferRange(range[0], markdown)
  33. postToImgur: (img, callback) ->
  34. req = require('request')
  35. options = {
  36. uri: atom.config.get('image-copy-chevereto.Api')
  37. formData: {
  38. action : 'upload'
  39. key : atom.config.get('image-copy-chevereto.ApiKey')
  40. source : img.toPNG().toString('base64')
  41. }
  42. json: true
  43. }
  44. req.post options, (error, response, body) ->
  45. if (!error && response.statusCode == 200)
  46. callback(body.image.display_url) if callback && body.image.display_url
  47. else
  48. callback('error ')
复制代码
项目地址

插件中默认使用的apiurl和key都是自己的 不保证会完全变,有条件的建议还是使用自己的apiurl和key) 还有。。。暂不支持gif

插件安装:直接Atom perference->install 中搜索 image-copy-chevereto即可 (

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

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

欢迎点赞~



回复

使用道具 举报