背景
作為程序員, 我有些"懶"也有些"散", 懶是不願意做重復的事情, 散是到處撒網, 收獲寥寥. 以往自己搭了博客, 寫了不少文章, 可惜第一次服務商硬盤掛了, 沒有數據..第二次到期忘了續費, 打不開了, 也懶得再去折騰.
這是我選擇博客園的原因, 人多, 事少, 速度快.
稍微不滿意的地方是markdown編輯體驗有點(非常)糟糕..
編輯器需求和代碼示例
我之前曾經做過web編輯器的研究, 也嘗試過開發類似CodeMirror , ACE 這樣的在線"代碼編輯器", 但始終覺得這些都不是我想要的.
這類編輯器有三個痛點:
- 瀏覽器兼容性差, 看開發者的修訂log就知道了, 每次新瀏覽器出來, 都可能出現一些兼容性問題;
- 性能不理想, 因為要完全模擬光標/選取, 甚至控制排版, 導致編輯大文件卡頓嚴重;
- 工作量巨大, 需要持之以恆, 反復調試, 很不容易.
當然, 上面這幾個其實都是很優秀的作品, 也大量使用在線上產品, 所以對於研究和開發編輯器都是參考榜樣.
作為最原始的"網頁編輯器", textarea仍是使用率最高的, 比如github上的markdown編輯區域, 博客園. textarea作為編輯器優勢:
- 文本樣式單一, 樣式通過標記描述, 寫作不容易分心;
- 簡單可依賴;
但劣勢也很明顯:
- 沒有語法高亮支持;
- 沒有鍵盤控制(快捷鍵)等;
- 沒有自動完成, 代碼片段等;
除了"語法高亮"有點困難外, 其他劣勢通過js可以彌補.
所以編輯器的基本需求就下面幾點:
- 快捷鍵;
- 自動完成;
- 代碼片段;
- 文本替換: 上面需求的基礎, 即根據鍵盤輸入, 替換已輸入的文本.
針對上面的需求, 可以總結為下面幾點開發工作:
以上是我兩三年前的代碼, 可能代碼組織一般..
示例
把上面幾個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編輯器吧~
結束
希望博客園開發同學考慮加上類似功能 😃