category: Chat tag: typora
Typora is a markdown editor that I love using. Up until now, I haven't found any editor that is more convenient than Typora. It has many useful features, including:
- Support for tables
- Support for LaTeX syntax, making it easy to write equations
- Ability to directly drag and drop images to generate corresponding markdown syntax
- Support for various HTML tags, such as iframe, video, ruby, etc.
- Customizable themes (using CSS)
- Built-in file and folder browsing and switching functionality
- And many other useful features
These well-designed features make me love Typora even more. However, there is one annoyance when using it, which is uploading images. Typora only includes the path of the image in the markdown, like the following syntax:
If you simply copy and paste this syntax, the image will not be displayed on the web page because users cannot access the path on your computer. You must upload the image to cloud storage or a server. It is quite troublesome to handle this manually, especially when the image is large. The thought of having to compress it before uploading adds an extra step, which interrupts the flow of writing.
I couldn't help but wonder if there is a way to upload images directly without leaving the editor. Typora itself supports powerful image dragging behavior, and it also works perfectly to copy and paste images from web pages. It is already a great user interface.
Finally, I came across this:
I was amazed! This feature allows you to trigger actions when inserting images into the editor, such as moving them to a specific folder or uploading them. What's even better is that 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 rest of the UI and interactive status are handled by Typora. This way, uploading images becomes completely painless!
The result looks like this:
Implementation
You can directly refer to the code on Github (written in Node.js). It's quite simple to implement, but I installed some packages to finish it quickly. If you prefer to start from scratch, you can try writing it yourself. Currently, it only supports uploading to S3.
Afterword
From now on, a new window has opened in my life. I will no longer procrastinate writing posts because of the hassle of dealing with photos. I share this with everyone who loves using markdown to create content.