专栏首页coding...Atom插件开发-使用自己的Chevereto图床API项目简介功能分析代码实现项目地址

Atom插件开发-使用自己的Chevereto图床API项目简介功能分析代码实现项目地址

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

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

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

项目简介

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

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

  • 使用自己图床的API
  • 上传图片获得URL

功能分析

功能灰常简单

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

image

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

image

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

代码实现

用的是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 ')

项目地址

插件中默认使用的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

欢迎点赞~

image

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jenkins + Android 自动化打包 发布到蒲公英写在前面准备工作新建任务签名配置一些报错

    最先想到的方案当然就是跟iOS一样使用fastlane,查了下相关资料发现fastlane有点重iOS轻Android,于是放弃。找到代替方案,直接使用grad...

    gwk_iOS
  • Objective-C NSFileManager的使用 各种文件操作所有方法具体实现

    初始化一下NSFileManager 并获取根路径 主要是加了一些判断,代码不是很精简 不要笑我。

    gwk_iOS
  • iOS开发实战-NetworkExtension食用教程写在前面项目介绍项目准备我不是广告结语

    由于未知原因苹果在mac OS 10.12中删除了这个文件,因此我们需要从10.11系统中提取或下载--百度网盘 安装完毕后,在新增build target中...

    gwk_iOS
  • EF Core利用Transaction对数据进行回滚保护

    What? 首先,说一下什么是EF Core中的Transaction Transaction允许以原子方式处理多个数据库操作,如果事务已提交,则所有操作都应用...

    码农阿宇
  • 控制反转和依赖注入模式

    一、控制反转和依赖注入两者搭配能像反射工厂那样解决程序集之间的耦合问题,下面将从Asp.Net经典的三层模式多方位的讲解控制反转和依赖注入模式,是如何帮我们进行...

    郑小超.
  • 基于EntityFramework 6 Code First实现多租户的一种思路

    公司原本有一个“xx系统”,ORM使用EntityFramework,Code First模式。该系统是针对某个客户企业的,现要求该系统支持多个企业使用,但是又...

    xhznl
  • Spark系列——Spark On Yarn 资源申请流程

    到这里我们也基本讲明白了 Yarn-Client 模式的资源申请了, 但是说的比较浅,没有涉及到很多细节, 说来也比较惭愧,Spark 的 Standalo...

    solve
  • GDC2017: 《Lone Echo》中的VR动画

    逍遥剑客
  • Python调用linux系统命令--使

    在python 中调用系统命令,如果使用subprocess.Popen() 模块,按照命令参数的的形式,可以分两种:

    py3study
  • 机器学习与深度学习核心知识点总结

    1480

扫码关注云+社区

领取腾讯云代金券