Originally published on my blog
preface
As a frequent markdown writer and blogger, it has always been a tedious job for me to insert pictures into Markdown. When I used to write weekly movie recommendations, I would insert a movie poster into markdown, and I needed the following operations:
- Open douban website, choose a satisfied poster, download
- Open the website of seven cattle, log in, dot dot, find upload, upload
- Close the upload window, find the address, copy the address, and close the seven cattle
- Paste it into markdown
Every time need tedious to open the web page for some necessary and boring operation. It’s a hassle. After using iPic, a great MAC gadget app, I really like its simplicity. However, the free version does not support the seven-cow bed. So I thought, could I write a tool like that myself? Combine oneself use habit to add a function incidentally again.
So I began my own picture upload tool development. It’s called PicGo.
Technology selection
At the very beginning, I wanted to write a native application with Swift, mainly to make a friendly volume, excellent performance of the application. However, given the rapid pace of the Swift iteration, many tutorials are no longer appropriate. And swift online tutorials are a lot to learn for my little front end. I just want to make a convenient tool, all in order to facilitate their own as a major premise. As a front end engineer, I decided to use Electron for development. And since I’m a fan of Vue, I used electronic-Vue as my electron development scaffolding. I have to say, the scaffolding electron vue provided was really well done, and it was easy for me to make my own modifications and configurations. Cross-platform support will be easier in the future.
Demand analysis
As a result of using iPic, a lot of its some of the operation mode I feel particularly worthy of reference. For example, I want to be able to upload with a simple drag and drop, I want to be able to upload images to my clipboard, and I want to be able to automatically copy links to my clipboard once the upload is successful, so I can edit directly.
In this case, I only need to edit the article as follows:
- Find the image you want to upload and use this tool to upload directly
- After successfully uploading, the address is automatically copied to the clipboard and pasted directly in markdown
All of a sudden a lot of original tedious operation!
Function display
It took about a month to learn the Electron framework from zero in my spare time every day to build the first working version of Travis- CI. It basically realized my original goal and greatly improved my article writing experience.
Operation demo
Delicate design
On macOS, you can drag and drop a Menubar icon to upload a file. The Menubar app window displays the 5 latest uploaded images and the images in the clipboard. Clicking on the picture automatically copies the uploaded link to the clipboard.
Convenient management
Check your upload history for easy reuse. Support to click the picture view. Support to delete pictures (only local record), so that the interface is cleaner.
An optional figure bed
Currently support weibo map bed and seven niu map bed. More will be supported in the future. Convenient for different map bed upload requirements.
Various links
Support 4 clipboard link formats to make your text editing at your ease.
The follow-up work
At present PicGo is still a very young project, there are certainly a lot of bugs, the function is also lacking. So it still needs to be improved. I hope you in the process of using any comments or suggestions can be put forward in the issues of the project warehouse ~
- Windows and Linux are not currently supported, but will be gradually supported in the future.
- More map beds will be supported in the future. Custom beds can be supported if possible (as long as the protocol is set up)
- Will integrate system services to provide one-click upload global shortcut keys
- Improve user experience and fix bugs
The last
Hopefully this is a tool that will improve your article editing experience. If you want to learn about electron development, I’ll be writing a few posts soon about how I developed PicGo electron. If you like it, please give this project a Star. In addition, it is open source and free. If you find it helpful, you can also consider giving me a cup of coffee. The QR code is on the home page of the project