我為什麼要做富文字編輯器【wangEditor5個月總結】

王福朋發表於2015-03-26

本文是幾年前寫的，直接訪問 wangEditor 官網 www.wangEditor.com 瞭解最新版的編輯器

---------------------------------------------------------------------

1. 為什麼要做富文字框？

　　一說到web富文字編輯器，很多人的印象就是網上一搜一大把，恨不得扔個磚頭都能砸一片。不錯，確實一搜一大把，但是真讓你說一下名字，你能說出幾個來？——估計沒多少吧？國外的就不用說了，文件看不懂，更新不更新還不知道，有bug也不好除錯。國內做的比較好的我知道有百度的UEditor和kindEditor。

　　但是這兩個也有它的缺點：介面過於複雜、不夠簡潔、UI設計也比較落後、不夠輕量化……

　　因此，我要做一個最簡單易用的富文字編輯器。於是乎在2014年11月，我推出了開源富文字編輯器——wangEditor

下載地址：https://github.com/wangfupeng1988/wangEditor
demo演示：http://www.libre-free.com/interface/wangEditor-master/demo.html （借用好心網友的伺服器，感謝他的支援）

2. 產品如何定位？

　　一個產品推向市場，勢必會面臨著使用者和競爭對手，如何讓使用者使用自己的產品而不用競爭對手的產品，這是必須要考慮的問題。

　　我們先說一個我在日常工作中常掛嘴邊的一個詞——2/8原則。大家應該都聽說過這個東東，2/8原則符合這個社會的任何環境：國家20%的人擁有80%的財富、公司20%的人創造80%的業績、軟體20%的功能滿足80%的需求……

　　同理，對於富文字編輯器來說，也是20%的功能滿足80%的需求，剩下的80%的功能只是為了那20%的需求。我要做的就是這20%的功能，去滿足大家80%的需求。如果你想要大而全富爾美，那麼wangEditor滿足不了你（這會讓你付出很多代價）；如果你想用最快的方式滿足你最主要的需求，那就請使用wangEditor。

　　因此，wangEditor的定位是做最簡單、易用、快捷、輕量化的富文字編輯器。我要把這20%的功能做精緻，把UI設計的更加簡潔漂亮，讓你一看就很舒服。

　　wangEditor使用教程如下：https://github.com/wangfupeng1988/wangEditor#1-%E4%BB%8B%E7%BB%8D，應用非常簡潔，大家可以去看看。

　　不要以為做簡單了就沒人用。大家對Visual Studio、Eclipse有需求，但是editplus這種輕量級的軟體，你就不用了嗎？

3. 一次被噴

　　我為wangEditor建立了一個QQ群（群號：164999061，歡迎大家加入），現在裡面只有40多個人。我本身也不大喜歡聊天，上班時候工作，下了班就看書、寫程式碼、寫部落格，也沒有到處去推廣該群，因此人少了些。

　　去年，忘記什麼時候了，反正是wangEditor還是第一版（還依賴於bootstrap2.0）的時候，有一個哥們在QQ聯絡我說要和我通過github合作開發，然後我很高興的同意了。結果他看了我的原始碼，說我的程式碼寫的不夠優雅（對，就是“優雅”這個詞），說這種小兒科的東西高手分分鐘就可以做出來，要給我重構。我說你要給我重構，你自己做一個不就完了嗎？後來倆人胡扯亂扯的扯了好多。最後他在群裡丟下兩句很鄙視我的話，就退群而去了。

　　我今天在群裡翻看了好一會兒，想找到當時他說的啥，截個圖給大家看看。可是沉底兒好久了，我期間也換了手機，找不到了。大體意思就是：這個產品也就是寫著玩玩，這種程式碼小兒科根本上部的廳堂，根本不能用……

　　當時我也沒有生氣。因為這個東西畢竟是面向使用者的，一個使用者一個口味，任何一個產品都不可能得到所有人的贊同。如果有10000個人喜歡你，至少也得有2000個人在罵你。後來群裡有好心人安慰我：不要理噴子，繼續努力……

　　的確，我沒有理會他，而是繼續優化程式碼、重構、再重構。我承認我第一版的程式碼寫的很不咋的，畢竟第一次做，jQuery最初也是經歷了幾次重構才穩定下來的。但是經過這兩次重構之後，如果之前噴我的那哥們再來看看我的原始碼，他絕對不會說不夠優雅。

　　下面繼續說產品的兩次重構經歷。

4. 兩次程式碼重構

　　這裡只說js程式碼的重構，UI設計的重構下文會提到。

　　第一版js程式碼（原版）

　　說實話，第一版js的程式碼，我現在全部忘記了。就像我高考時候，數學考試剛剛結束，出來之後竟然忘記最後一道大題是什麼。但印象中第一版的js就像一個流水線一樣，頁面上需要什麼，我就用寫什麼。資料結構、物件導向、設計原則等等這些完全都沒有考慮——怪不得人家說我的程式碼不夠優雅！

　　大家先不要笑話我。根據我的經歷來看，不是我不想做好設計，而是富文字編輯器這個東西，看著很簡單，其實做起來還是蠻複雜的。畢竟第一次做，有些東西想不到，縫縫補補是難免的。

　　再者，產品是一版一版釋出迭代的，好的軟體是重構出來的、不是一下子設計出來的。你不要期望花10個月的時間一下子設計一個好軟體，但是你可以一個月升級一版，通過10次升版做出一個好軟體。

　　第二版js程式碼（第一次重構）

　　這次重構我的目的是兩個字——“擴充套件”——這說明我開始思考設計了。設計原則的一個最高要求就是開放封閉原則——要求系統通過擴充套件來應對需求變化。因此我就思考：如何讓開發者使用wangEditor通過二次開發擴充套件自己的選單按鈕和自定義的功能。

　　想到了就做！光寫完程式還不行，還得配上完善的使用者手冊。於是我又花了很大精力去寫二次開發手冊，還發布到部落格園上。但是後來證明我的這個想法是失敗的。不是因為我做的功能不行，而是因為不滿足使用者需求——使用者不會耐煩去做二次開發的，他們就想拿來就用，誰耐煩給你二次開發？

　　雖然我這次想多了，但是這次重構也是有意義的。經過這次重構，我可以關閉對外擴充套件的API，但是內部擴充套件功能還是有好處的。因此，經過這一次重構，系統程式碼徹底就走出了“蠻荒時代”，開始進入“文明社會”了。

　　但是，再次重構的時候要想想：不要求全面、但要求精緻，做什麼事情都要圍繞著目標和定位而行。

　　第三版js程式碼（第二次重構）

　　這一次重構的想法是今年春節，放假在家買了一本《基於MVC的JavaScript Web富應用開發》，花了幾天時間看了看。也許是因為我走馬觀花的看的不仔細，這本書我沒看出多少道道（現在計劃重新再看一遍）。但是看書期間我突然想到了：wangEditor的程式碼是不是物件導向的？物件、變數是不是都結構化了？——這樣一想，還真不是。

　　於是回來之後，我經過一段時間的思考和準備，我又大膽的做了第二次重構。前前後後經過了兩週的時間，才整理完成，釋出到Github上。經過這次重構，使得wangEditor程式碼真正進入物件導向的世界，而且程式碼還模仿了jquery的設計思路，我覺得挺有意思。

　　接下來的重構

　　就在第二次重構剛剛完成時，我腦子裡又突然想到了一點——是否需要MVC？能想到這一點非常好，但是不要急於去修改。重構不能太頻繁，要不然系統不容易穩定。而且，是否用MVC、如何用MVC還是要經過一段時間的考慮。也許在幾個月之後，我會再為了MVC重構一次。但是誰知道呢？

5. 五次UI升級

　　初版

　　這是基於bootstrap2.0實現的第一版介面，按鈕還沒有扁平化，佈局也比較簡陋。

　　UI升級1

　　後來將升級為基於bootstrap3.0，按鈕扁平化，選單欄和編輯區整合到一個容器中。感覺比以前美觀了許多。

　　UI升級2

　　後來擺脫了bootstrap的依賴，自己實現了選單欄的樣式，去掉了按鈕的邊框，使得UI更加簡潔。但是這些選單按鈕是基於fontAwesome字型庫的。

　　UI升級3

　　fontAwesome是一個很完善的字型庫，裡面有400多個icon圖示，導致字型檔案很大，影響載入速度。這400多個字型庫中，我能用到的也就是20個左右，因此根本沒必要在繼續依賴fontAwesome。因此，我通過www.fontello.com自定義封裝了自己的字型庫，用多少就封裝多少，字型檔案的大小變為原來的7.74%，載入速度快了很多。而且，不用再告訴使用者“首先你必須要引用fontAwesome.css……”大大降低學習成本（因此好多人根本不知道什麼是fontAwesome）。

　　UI升級4

　　整天看IT網際網路的新聞，看到office2016的曝光介面，因此有了重新設計UI的想法，於是就做了如下介面。（如果不喜歡，想回到傳統風格，也是可以配置的。Github中有說明）。而且，介面的色調都是可配的，雖然預設的是深灰色色調，但是你可以通過簡單的調整幾個顏色值，來實現你想要的任何色調，github中有說明。