If you have any questions or feedback, pleasefill out this form
Table of Contents
This post is translated by ChatGPT and originally written in Mandarin, so there may be some inaccuracies or mistakes.
Typora is my favorite markdown editor, and to this day, I find it unmatched in terms of ease of use. For more complex blog posts, I write them in Typora before uploading. Typora boasts a wealth of features, including:
- Support for tables
- LaTeX syntax support for writing equations
- Drag-and-drop functionality for images to generate corresponding markdown syntax
- Support for various HTML tags, such as iframe, video, ruby, and more
- Customizable themes (written in CSS)
- Built-in file and folder browsing and switching capabilities
- Numerous other handy features
These well-crafted functionalities make Typora an indispensable tool for me.
However, I do have one frustration while using it: image uploads. Typora only inserts the image path into the markdown, like this syntax:
 If you copy it as is, it will result in broken images on the web, because users cannot access your local computer paths; you need to upload the images to cloud storage or a server. Handling this manually can be cumbersome, especially when images are large, as I often want to compress them before uploading. The thought of adding another step can disrupt the flow of my writing.
I couldn't help but wonder if there was a way to upload images directly without leaving the editor. Typora supports powerful drag-and-drop functionality for images, and copying and pasting from the web works perfectly—it's a fantastic UI.
Finally, I discovered this:
I was amazed! This feature allows you to define actions when you drop an image into the editor, such as automatically moving it to a specific folder or uploading the image. Even better, you can define your own command to upload images!
In this upload command, I compressed the image, uploaded it to S3, and returned the image URL. The remaining UI and status interactions are handled by Typora, allowing for a completely seamless image upload experience!
The final result looks like this:
Implementation
You can check out my code on GitHub (written in Node.js). The implementation is quite straightforward, but I just wanted to get it done quickly, so I installed the necessary packages and dove right in. If you prefer a DIY approach, feel free to try writing it from scratch. Currently, it only supports uploads to S3.
Conclusion
Since then, a new door has opened in my life; I no longer hesitate to post simply because I don't want to deal with photo uploads. I'm sharing this with everyone who loves creating content with markdown.
If you found this article helpful, please consider buying me a coffee ☕ It'll make my ordinary day shine ✨
☕Buy me a coffee