擴展博客園的markdown編輯器

背景

做爲程序員, 我有些"懶"也有些"散", 懶是不肯意作重複的事情, 散是處處撒網, 收穫寥寥. 以往本身搭了博客, 寫了很多文章, 惋惜第一次服務商硬盤掛了, 沒有數據..第二次到期忘了續費, 打不開了, 也懶得再去折騰.

這是我選擇博客園的緣由, 人多, 事少, 速度快.

稍微不滿意的地方是markdown編輯體驗有點(很是)糟糕..

編輯器需求和代碼示例

我以前曾經作過web編輯器的研究, 也嘗試過開發相似CodeMirror , ACE 這樣的在線"代碼編輯器", 但始終以爲這些都不是我想要的.

這類編輯器有三個痛點:

• 瀏覽器兼容性差, 看開發者的修訂log就知道了, 每次新瀏覽器出來, 均可能出現一些兼容性問題;
• 性能不理想, 由於要徹底模擬光標/選取, 甚至控制排版, 致使編輯大文件卡頓嚴重;
• 工做量巨大, 須要鍥而不捨, 反覆調試, 很不容易.

固然, 上面這幾個其實都是很優秀的做品, 也大量使用在線上產品, 因此對於研究和開發編輯器都是參考榜樣.

做爲最原始的"網頁編輯器", textarea還是使用率最高的, 好比github上的markdown編輯區域, 博客園. textarea做爲編輯器優點:

• 文本樣式單一, 樣式經過標記描述, 寫做不容易分心;
• 簡單可依賴;

但劣勢也很明顯:

• 沒有語法高亮支持;
• 沒有鍵盤控制(快捷鍵)等;
• 沒有自動完成, 代碼片斷等;

除了"語法高亮"有點困難外, 其餘劣勢經過js能夠彌補.

因此編輯器的基本需求就下面幾點:

• 快捷鍵;
• 自動完成;
• 代碼片斷;
• 文本替換: 上面需求的基礎, 即根據鍵盤輸入, 替換已輸入的文本.

針對上面的需求, 能夠總結爲下面幾點開發工做:

• 選區控制
• 編輯器初始化
• 詞典文件 用於單詞補全
• 代碼片斷, 用於快速替換. html, markdown

以上是我兩三年前的代碼, 可能代碼組織通常..

示例

把上面幾個js文件合併, 能夠查看下面demo效果:

html編輯器

請嘗試輸入html<tab>, divc<tab>, divid<tab>查看效果, 更多功能光標在編輯器中按F1鍵查看:

點擊此處初始化編輯器

markdown編輯器

請嘗試輸入h3<tab>, img<tab>查看效果, 更多功能光標在編輯器中按F1鍵查看:

點擊此處初始化編輯器

更多功能:

• 體驗自動完成, 輸入字母a, 而後按<ctrl><down>組合鍵;
• 縮進多行, 選中多行按<tab>, 或者反向縮進<shift><tab>
• ...查看<F1>幫助吧, 很久了, 我已經不記得實現了那些功能了, 有興趣的同窗能夠查看源碼.

擴展

若是想擴展本身的代碼片斷或者單詞表, 能夠參考詞典文件, markdown片斷 來添加本身的單詞.

擴展博客園的markdown編輯器

ok, 到此爲止, 能夠寫一個收藏欄按鈕來擴展博客園的markdown編輯器了.將下面連接拖到收藏欄, 在博客園編輯界面, 點擊一下, 體驗擴展後的markdown編輯器吧~

擴展markdown編輯器

結束

但願博客園開發同窗考慮加上相似功能 :)