你好~ 我是小斑

大家好，我是小斑，於 2020-8-1 誕生，一個起於 Markdown 卻不止於 Markdown 的富文字編輯器。

又一個編輯器？

編輯器的世界裡，前輩眾多，知名編輯器比比皆是 Word、Page、 Idea、Vscode 等等，但大陣營可以分為兩個：

• 純文字編輯器 - 只能輸入字元的編輯器，程式設計師電腦裡的 IDE ，大多屬於這一類；
• 富文字編輯器 - 可以進行圖文的混排，功能豐富，文字有單獨樣式、格式的編輯器，主要活躍與 Web 端；

純文字編輯常被用來寫程式，但其中卻有個身在曹營心在漢的異類：Markdown 編輯器，這類編輯器雖說只能輸入文字，樣式也單一，但生成的內容卻可以和富文字編輯器媲美。

另一類，便是富文字編輯器了，順便提一下，小斑我也是富文字編輯器，流行於 Web 端的富文字編輯器有很多，但我的主人為什麼還要費勁心思造小斑呢？這就得請我的主人來說道說道了，下面有請阿飛先生來講述講述。

“咳咳！不是說自我介紹的任務交給你了嘛~ 我已經和你說過啦，你自己來吧！”

“老大，你怎麼還害羞上了。。。那行，我自己來！”

“故事發生在一個月黑風高的夜晚，只有主人面前的電腦亮著，電腦螢幕裡不知放著什麼，陰暗的螢幕上有一口很深的井，突然···”

“小斑！”

“好好好！那我正式開始了！”

不得已的妥協

其實吧，最早的時候，大概 3 年前，我還不存在，老大想找個稱手的富文字編輯器來搭自己的部落格，誰讓老大是個程式設計師，最大的特點就是喜歡折騰，奈何 3 年前的老大還是隻小菜雞，沒有能力自己弄一個部落格系統，看了一遍市場上成熟的部落格框架後，選了 Ghost 這個簡約的部落格系統，也結識上了 Markdown 這門幹練的語言。

但沒過多久，老大他就開始嗶嗶了：“作為一個前端，連個圖文混排的部落格都沒有，太 Low 了！”

接著就開始折騰，剛開始，他只是想簡單的增強 Markdown 以達到自己想要的效果，一頓寫 Markdown-It 的外掛，但是增強來增強去，還是不爽，畢竟編輯 Markdown 時是沒有效果的（當然，雙屏 + 同步滾動是個不錯的解決方案），牢騷話也變成了：“我都在公司面對了一天的純文字編輯器，回來寫部落格還得面對純文字，寫點東西可太不容易了。”

哎！沒得辦法，富文字編輯器必須得搞起來，老大也不想再造輪子，綜合考慮試用下來，最終還是做出了決定：那就是造一個！！但話得說說清楚：別的編輯器也很不錯，但卻並沒有滿足老大的需求，就比如老大在折騰期間選中的一款富文字： DraftJs。

DraftJs

DraftJs 如它的名字一樣：草稿，在記事方面，絕對的夠用，但對於生成網頁來說，卻有幾個痛點：

• 圖片不能連著放，中間的空行刪除不了；
• 圖片不能塞到文字中，老大那一大箱的表情包可都用不了了，雖說老大還是通過曲線救國的方式給新增上了；
• 不能生成 Markdown ，雖說能生成 Html ，但是 Html 結構複雜，語法不如 Markdown 來的簡潔幹練；
• Table 表格，不支援；
• 文字的樣式輸入截斷不了，比如游標輸入前的字元是加粗的那麼之後的文字永遠都是加粗的狀態，不能截斷樣式，有點難受；
• ···

相信這些，知乎的前端大佬們應該很懂，老大看了他們的編輯器，用的就是 DraftJs ，想必塞由公式生成圖片費了不少勁吧~

其實老大那時也還沒開始重複造個輪子（沒準是實力不夠呢！?），深入看了 DraftJs 原始碼，並翻譯了整個 DrafrJs 文件後，寫了個 Draft-X 用於增強 DraftJs。

但是沒過多久，還是不爽！（可真是難伺候~ ?）

思前想後，老大決定放棄 DraftJs 在看看別的富文字編輯器，或自己從頭寫一個。

決定

在重新找一個編輯器之前，老大列了下自己的需求：

• 樣式能夠完全的自定義（至少對於編輯器開發者而言）；
• 直接新增樣式還不夠，還要加起來方便，比如寬度的修改直接拖動角標等；
• 文字和圖片能連續排放，表情包必須安排上；
• 文字樣式能截斷，輸入空格後，文字還原為預設樣式；
• 必須支援 Table；
• 最好還能直接像 Highlight 那樣，通過修改 Css ，直接定製文章的整體樣式；
• 既然提到了 Highlight 那程式碼塊要支援高亮；
• 當然，其他的一切都要向別的編輯器靠齊；

• 最後，也是很重要的一點：與 Markdown 要有互動：

  1. 直接匯入 Markdown 檔案；
  2. 支援匯出 Markdown 檔案；
  3. 支援直接複製 Markdown 文字；
  4. Markdown 支援的內容，編輯器必須要支援，編輯器的功能應該是大於等於 Markdown 的；

大概也就這麼多吧~

“多嗎？？？不多吧！！！”

“不多不多? ?~ 老大你怎麼來了！” 高要求才能有小斑我呀！

帶著這些要求，老大看遍了目前能搜到的富文字編輯器，與預期的功能相比，都差了一兩點。

• TinyMCE、CKEditor、UEditor、wangEditor 之類的富文字編輯器為純 Html 編輯器，是對 contenteditable 容器的增強，它們很優秀，但卻不符合老大的要求，老大理想中的富文字編輯器是能生成別的內容，不只是 Html，比如 Markdown ，因此內容必須是由 JavaScript 來控制。這點還真不是老大挑，試想一下，如果你寫錯了一個字，是在 Html 裡找容易呢，還是在 Markdown 裡容易，而且如果內容由 JavaScript 控制，沒準，還能生成別的東西！比如說小程式的頁面？不過這都是後話了，但這一切實現的基礎就是內容在自己的掌控範圍內！因此，這點其實還挺重要的！
• Quill、DraftJs 內容由 JavaScript 控制，但是功能有點不夠用，最重要的原因是不支援 Table；

當然，以上兩類都可以通過一些曲線救國的方法來支援老大的想法，比如在 TinyMCE 上加一個 Html 解析器，生成抽象語法樹後，在生成別的內容，或是繼續增強 DraftJs 。思來想去，3 個月前，老大決定：要做就做最正確的事，做一個連一個字元都在自己掌控中的編輯器，這樣無論自己想幹什麼，都能實現。於是，3 個月後，小斑正式誕生！?

能幹嘛？

我是小斑，一個功能完整且豐富的富文字編輯器，相關的說明文件就在我的編輯器裡，開啟就能見到，說明書即是瞭解小斑的途徑，也是能夠編輯的哦，放心大膽的去改吧，說明書隨便改，小斑並不會儲存。想恢復？重新整理一下就好啦！也希望大家好好閱讀後再開始探索哦~ 在這簡單的談談我的特點和強大的功能吧：

1. 使用但不依賴於 contenteditable 容器，簡單來說，老大隻用了該容器的游標用於定位輸入或是操作的位置，其他的內容一概不用（包括文章歷史棧的管理），也就是說：如果哪天老大想把游標也折騰折騰，那麼 contenteditable 容器大概會被老大拋棄吧；
2. 內容完全由 JavaScript 所控制，小到一個字元，只要配合適當的生成器，就能生成所需要的內容（目前能生成 Html 和 Markdown）；
3. 樣式隨意新增，小斑的核心完全支援，但對於一個面向使用者的小斑而言，老大考慮後，提供操作，但未開放；
4. 與 Markdown 有著良好的互動，包括直接開啟，匯入匯出，直接複製 Markdown 內容；
5. 快捷生成，小斑有一套完整的快速生成指令，在空行內直接輸入指令，按下 Tab 鍵即可快速生成段落型別，並且這些指令與 Markdown 的標記完全一致，比如在空行輸入 # 鍵，在按下 Tab 鍵，就能直接生成一級標題，當然詳細內容請參考說明書；
6. 程式碼由 Highlight 進行高亮，編輯與高亮同步進行；
7. 文章可設定主題，一鍵修改文章的整體呈現；
8. 支援 PWA，使用 Chrome 開啟，位址列右側會有 + 號哦，點選一下就會生成本地應用，只要不切換程式碼和文章主題，沒網也能用！

接下來

接下來，老大想把小斑誕生過程中遇到的一些問題，以及整體的架構給好好梳理一下，並記錄下來。

這部分老大已經全權交給我整理了！那我就不客氣了，偷偷告訴大家，我的內部是一個井然有序的世界，各個部門擔任著各自的職責，忙碌而有序。

好啦！今天嘚吧嘚的說了這麼久，也是希望大家能多多使用我，愛你們喲~

哦！對了，為了避免使用低版本的瀏覽器時，造成問題，小斑主動做了瀏覽器版本校驗，請把瀏覽器升級到最高版本哦~ ps: 生成的文章不受瀏覽器版本影響。~~~~

本文由 ZebraEditor 編輯並生成，我是小斑，我為自己帶鹽。