我从来没有遇到过一款编辑器,可以将高颜值、高扩展性和低开发门槛三者做到如 atom 般完美。虽说这三个特性并非衡量一款编辑器的主要指标,但无论如何我推荐你试用一下,并且,务必根据自己的切实需求,安装或开发符合自己使用习惯的插件,毕竟这才是它的精髓所在。
下面我将从0开始,展示 atom 简易插件的开发流程。
0x00. 需求分析
之前的文章都是发表在博客上的,而不管是基于 WordPress 这样的重型 CMS,还是基于 hexo/jekyll 这样的静态页面,都有成熟的脚本可以做到一键生成并发表。可是当我准备长期且认真的在微信公众平台上更新文章时,那个简陋的网页编辑器简直让我痛不欲生。为此,我特意写了一个页面,原理和 Markdown here(一款可以将 Markdown 格式文本转化为 html 的浏览器插件)类似,只不过我自己加了一些自定义的脚本;网上也有很多类似的方法。但这些方法都有个共同的缺点,就是没有办法处理图片,即使排版排到再完美,一涉及到图,就还是要乖乖切换到公众号平台一张一张上传。在这个时期,我想上传一张代码截图到文章里的步骤是:使用截图工具截图 ->
保存图片到本地 ->
把保存在本地的图片上传到微信平台 ->
从微信平台将图片插入到文章中。而如果我要在一篇文章中插入十几张图,这个工作量和重复性简直会把人逼疯。这也直接导致我在文章里尽量多写文字少用图。
后来我发现,如果文章中的图是可以被外链访问的(也就是说公网上有一个链接可以单独请求到这张图),那么在页面上直接选中图片然后复制,可以直接粘贴到微信公众号的编辑器里,接下来微信会自动上传。
所以,如果有一个小插件,可以将上面四步合并实现自动化,那我就又成功给自己续了 1s。:)
0x01. 框架搭建
在 atom 中,点击 ctrl
+ shift
+ p
,在弹出的命令输入框中输入 generate package
,选中然后按回车, atom 就会在本地帮你新建好一个插件所需的所有基本文件。如下所示是一个以 testpackage
命名的插件的目录树:
testpackage ├ keymaps/ │ └ testpackage.json //定义该插件功能所对应的快捷键 ├ lib/ //这个目录放置实现该插件所有功能的代码 │ ├ testpackage-view.js //一个和用户交互页面的生成示例 │ └ testpackage.js //该插件的入口文件,相当于 main 函数 ├ menus/ │ └ testpackage.json //定义菜单栏显示内容 ├ spec/ //保存插件的测试代码(非必须) ├ styles/ │ └ testpackage.less //定义插件加载css样式(非必须) ├ .gitignore //版本管理配置文件 ├ CHANGELOG.md //升级日志记录文件(提交到官方插件库后,该文件会在每次升级时自动更新) ├ LICENSE.md //协议 ├ package.json //插件的配置文件,包括插件名、版本号、关键词、依赖包等 └ README.md //写给用户的说明手册,包括如何安装、如何使用等
这个插件默认实现了一个功能,就是在编辑窗口弹出一句欢迎语。
0x02. 功能实现
首先我们知道,每次用截图工具截图后都有两个选择,一个是点保存
,然后选择一个位置把刚才的截图存下来;另一个就是点确定
,然后在聊天窗口中直接粘贴。这个时候,系统的内存中其实是保存有刚才的截图的,所以我们要做的就是读取系统粘贴板中的内容,然后在本地指定文件夹下将其保存成文件。
atom 原生支持 node,所以这也意味着 node.js 的所有官方库我们都可以直接调用。要实现0x01
中提到的功能,需要用到 qiniu
这个库,帮我们完成上传到七牛云空间上。
只要满足以上两点,就可以做到截图后直接在 atom 中粘贴,即可自动插入符合 Markdown 格式的存储在七牛云上的图片引用。
这里就不进行太深入的代码分析,毕竟代码都是开源在 gayhub 上,你可以随时下载、查看、提交Bug或建议。
gayhub 地址: https://github.com/Cubernet/insert-img
0x03. 测试发布
如果你觉得自己的插件已经通过了测试,达到可以发布的水准,那就可以按照下面的步骤将它提交到 atom 官方插件库中。
- 在 github 上面新建一个 repo 并把代码上传上去;
- 把 package.json 中的各种字段填写完整,version 保持默认的“0.0.0”即可, atom 会自动更新这个字段;
- 去 atom 官网搜索下是否已经存在和你的插件同名的插件,如果有,那么给你的插件换个更好听的名字;
- 在插件的根目录下运行
apm publish minor
发布你的插件;
上面那条命令会将你的插件提交到官方插件库中,同时自动更新配置文件中的 version 字段,然后创建一个新的 git tag 并将更新后的插件代码提交上去。关于这条命令的更多资料,可以运行 apm help publish
获取。
这时,你的插件已经发布成功,其他 atom 用户就可以在编辑器的插件安装页面直接搜索你的插件名,然后选择安装了。
0x04. 大功告成
大功告成?你以为敲下回车的那一刻就是你大功告成疯狂 dota 的时候?
笑而不语 :)
从这一刻起,你将从四面八方收到各种让你抓耳挠腮磕头撞墙的 bug 反馈和 feature 建议,于是你陷入了无穷无尽的查漏补缺、迭代升级中。
你以为你成功的给自己续了一秒?
Too young, too naive.
「一键投喂 肥宅快乐水🥤!」
谢谢老板,老板大气~
使用微信扫描二维码完成支付

本文由 Cubernet 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Dec 22, 2016 at 08:34 pm