擴充套件部落格園的markdown編輯器

jpss發表於2014-08-27

套件

背景

作為程式設計師, 我有些"懶"也有些"散", 懶是不願意做重複的事情, 散是到處撒網, 收穫寥寥. 以往自己搭了部落格, 寫了不少文章, 可惜第一次服務商硬碟掛了, 沒有資料..第二次到期忘了續費, 打不開了, 也懶得再去折騰.

這是我選擇部落格園的原因, 人多, 事少, 速度快.

稍微不滿意的地方是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片段來新增自己的單詞.