[Javascript] Summernote + ImgUr 不使用 Server 儲存圖片
2021-06-21
其實 summernote 是我蠻常用的 html editor ，他預設的上傳圖片是用 base64 ，你可以改透過自己寫 server 的部分來處理圖片 需要的話可以參考這篇 Summernote 圖片上傳存成實體檔案而不是預設的base64 ，不過後來想想能不能直接跟 ImgUr 整合呢，這樣 server 完全也不用保存圖片，當然這要看你客戶需求，不是一股腦地就整了，廢話不多說，咱開始吧..
1. 首先你要去申請一個 ImgUr 的 Client ID，申請網址 https://imgur.com/account/settings/apps ，申請完之後你就會拿到一個 Cliendt Id 之後用到
2. HTML Code :
3. Javascript Code :
簡單的說，就是拿到 file 之後 ，轉 base64 然後讀了一下 imgur 的 api spec 在 post 過去，這裡面有一個缺點就是 你可能會暴露你的 client id 在外面，這就自己評估了 ..
JSFiddle 屍體:
https://jsfiddle.net/no2don/Ln19o0c2/52/
ImgUr API:
https://apidocs.imgur.com/#c85c9dfc-7487-4de2-9ecd-66f727cf3139
Summernote:
https://summernote.org/getting-started/