Atom插件开发-使用自己的Chevereto图床API

小贝

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

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

欢迎点赞~