半熟前端

軟體工程師 / 台灣人 / 在前端的路上一邊探索其他領域的可能性

雜談

在 Typora 編輯器內自動上傳圖片

Typora - 好用的 markdown 編輯器

Typora 是我非常愛用的 markdown 編輯器,用到現在覺得沒有任何比它更順手的編輯器。比較複雜的部落格文章我就會在 Typora 寫好後上傳,Typora 有非常豐富的功能,包含:

  • Table 的支援
  • 支援 LateX 語法,方便寫算式
  • 可以直接拖拉圖片產生對應 markdown 語法
  • 可支援多種 HTML 標籤,像是 iframe、video、ruby 等都可以
  • 可以自定義主題(用 CSS 撰寫)
  • 內建檔案、資料夾瀏覽與切換功能
  • 還有各種其他好用的功能

以上這些恰到好處的功能,讓我對 Typora 愛不釋手。 不過在用的時候有個煩惱,就是圖片的上傳。因為 Typora 只會將圖片的路徑放入 markdown 當中,像下面這種語法:

![image alt](/Users/Kalan/my/image/path.png)

如果照樣複製的話在網頁上呈現的話會直接破圖,因為使用者沒辦法存取你家電腦路徑,必須要將圖片上傳到雲端或是伺服器儲存空間才行。自己手動處理很麻煩,有時候圖片很大,就會想要先壓縮一下再上傳,一想到又要多一個操作就覺得很麻煩,寫文章的思緒就容易被打斷。

不禁心想有沒有不用跳脫編輯器也可以直接上傳圖片的方法。Typora 本身支援蠻強大的圖片拖拉行為,從網頁上複製貼上也完全行得通,本身就是一個很棒的 UI。

終於,我看到了這個:

Typora 上傳圖片

一看驚為天人啊!這個功能可以讓你在把圖片放到編輯器時要觸發的行為,像是統一移到某個資料夾、上傳圖片等等,更棒的是你可以自己定義 command 來上傳圖片!

Typora 圖片上傳客製化介面

在這個 upload 的指令當中,我把圖片做了壓縮,上傳到 S3、回傳圖片 URL,剩下的 UI、狀態互動都交給 Typora 處理,這樣一來就可以完全無痛上傳圖片!

完成後效果會像這樣:

實作

可以直接參考我在 Github上的程式( Node.js 撰寫),實作上還蠻簡單的,但因為只想趕快完成所以套件裝一裝就直接上了,喜歡從頭自己來的話也可以自己寫寫看。目前只支援 S3 上傳。

後記

從此我的人生開了一扇窗,再也不會因為懶得處理照片然後就懶得發文了。分享給熱愛用 markdown 產出內容的大家。