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

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

1. 為什么要做富文本框？

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

　　但是這兩個也有它的缺點：界面過于復雜、不夠簡潔、UI設計也比較落后、不夠輕量化……

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

1. 下載地址：https://github.com/wangfupeng1988/wangEditor
2. 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中有說明。

　　

 

　　UI升級5

　　這是近期修改的，是一次小改動。以前菜單欄的分組用一個豎線“|”，而本次真正的分開了。相比上一個界面，本次使得菜單分組更加清晰，一目了然。

　　

 

6. 下一步的計劃

　　接下來，近期不會對代碼做太大的調整，以完善和優化為主。近期也不會增加復雜功能，但是會把當前的功能繼續優化，優化UI界面、用戶體驗等等。

　　總之我覺得做產品要有一個工匠的心，每時每刻都要反復琢磨，如何才能讓產品最優。只要自己做個有心人，多去觀察多去參考，產品肯定做的越來越好。

　　一個重要工作，接下來我要把wangEditor.com網站搭建起來，域名和空間都注冊了，只是一直沒來及備案和綁定。

7. 交流&建議

交流QQ群：164999061 
二次開發聯系：wangfupeng1988#163.com（#->@）

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

學習作者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大眾點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

也歡迎關注我的開源項目——wangEditor，輕量化web富文本編輯器

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