TinyMCE 到 SimpleMDE (中？)

距離上一次說要把編輯器換成 SimpleMDE 已經是去年3月的事情了

趁著這次春節，終於鼓起勇氣來動手了

1. 更換 SimpleMde

如同上次所說，我參考了這篇 IT 鐵人賽這位暐翰大大的系列文章
不過雖然有參考文章，可能因為我自己也亂改客製了 MiniBlog.Core 不少東西
在修改過程中還是遭遇到了許多不明問題，所以後來直接去爬這位大大放在 Github 的 Demo
依序看過幾個相關的 Commits，才知道實際上的修改步驟，以及幾個關鍵的 html 元素與 editor 之間的互動
最後才終於把編輯器從 TinyMCE 換成 SimpleMDE
實際存到後端的文章，本來有一個 Content 欄位會儲存 Html 原始碼
現在會多一個 MarkDownContent，儲存了 markdown 語法的文章內容
在顯示與更新內容時，會由 SimpleMde 做轉換

換成 markdown 編輯文章後，發現在編輯器中 preview 的結果很正常
或者說，是比較接近 Github 等網站上看到的樣式
但在存檔後，實際檢視文章時，卻發現原本 Miniblog.Core 預設的樣式，非常不符合預期 XD
但本人算是前端智障，所以在
1. 找出預設 css 檔所在位置、2. 註解部分 css、3. 引入 Github Markdown CSS 檔、4. <code>的顯示改用 highlight.js
過程中又花了不少的時間

換了 SimpleMDE 之後，發現它內建的 Insert Image 按鈕，作用只是幫你插入這段文字而已
```
![](https:// )
```
這樣我原本串 imgur API，去上傳圖片的動作就失去意義了
(要手動開 imgur 網站上傳，再把網址貼過來)
幸好 SimpleMDE 除了內建的22個按鈕
也允許我們自己另外新增新的按鈕，並自訂要觸發的事件
只不過前端智障如我本人在下，又花了很多時間才處理好這段
- 自訂 toolbar action 觸發自訂事件
- 用 js 產生 input 元素然後 click 它，並監聽 change event，在選擇檔案後會得到 files 物件
- 使用 FormData 及 XMLHttpRequest 的處理方式向後端上傳圖檔
- 在 xhr.onreadystatechange event 中處理
  當 xhr.readyState == XMLHttpRequest.DONE 時
  取出向後端 upload image 的 response (成功時會是一個 imgur 圖檔 url)
- 把檔名組合成 ![](https://xxxxxx.ooo) 的格式，然後再更新回編輯器的 TextArea
好不容易處理完上傳圖片按鈕，但又想到，應該要順便支援
拖曳圖檔 & Ctrl+V 貼上 兩種上傳方式
- 等我大概搞清楚怎麼處理 paste、drop 事件
  以及發現瀏覽器有沙盒相關限制，不能 直接對本機檔案 Ctrl+C 後，直接 Ctrl+V
  然後從 ClipBoardData 取得 Files，又是幾個時辰過去了 ...

修改過程中也有陸續改一些之前發現的 bug，或是臨時想到的調整

從首頁檢視文章，畫面最下方會有 <<更舊、更新>> 兩個按鈕

MiniBlog.Core 的分頁邏輯是，最新(最後)一頁是 page = 0
然後往前一頁 (較舊的) 是 page = 1，依此類推

[更新] 按鈕的顯示條件是
```
 @if (currentPage > 0)
 {
     // 顯示 [更新] 按鈕
 }
```
這沒有問題

但是之前有發現一直按 [更舊] 到了第一頁，畫面上還是會顯示 [更舊] 按鈕
而再按下去後，畫面上卻沒有文章了

看了一下原本 prev button 的顯示邏輯是
```
 @model IEnumerable<Post>
 @if (Model.Any())
 {
     // 顯示 [更舊] 按鈕
 }
```
意思大概是，只要目前這頁有文章，就還是要顯示 [較舊] 按鈕
這怪怪的，所以我的調整方式是，後端在取該頁 posts 時，順便多取出下一頁的 posts
(目前設定一頁是 5 篇)
然後把下一頁的 posts.Any() 作為要不要顯示 [更舊] 按鈕的條件，放進 ViewBag 給前端判斷
網頁字體換了思源黑體 Noto Sans TC
目前還不確定這是不是一個好的決定，需要觀察看看效果

其實還想把網站的樣式做一些比較大的調整，但是......前端智障心有餘而力不足
接著又已經春節結束開工啦！下一次更新不知道是什麼時候了 (~~Flag~~)