你好~ 我是小斑

你們好，我是小斑，於 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 編輯並生成，我是小斑，我爲本身帶鹽。