1. 引言

　　標題說是一周年，其實是不是正好是一周年，我也忘記了，光從github的提交記錄看也不準確。印象中覺得，如果要論想法，到現在一年多了，如果要論實際寫代碼，可能差不多正好一年。

　　從8月底在濟南離職來到北京，一直熟悉新的工作環境和工作節奏，好久沒有更新博客了。今天來總結一下這一年的wangEditor的成長過程，以及我自己在這一年的時間，對于技術、產品等各方面的思考。

　　感覺對這幾方面的體會和感悟還是挺多的，拿出來和大家分享。

2. 什么鬼？

       不過，大部分朋友可能還都不知道wangEditor是什么鬼？

       wangEditor——是我開發的一款輕量級富文本編輯器，開源免費，一年來一直在更新完善。有興趣或者有需求的同學，歡迎猛戳以下鏈接，或者加入QQ群：164999061，那里已經有260多個小伙伴（不斷增長）在歡樂的玩耍了。

 你若要問wangEditor和其他富文本編輯器的區別，進入官網看一下你就知道啦！

• 官網、demo、捐贈：www.wangEditor.com
• github：https://github.com/wangfupeng1988/wangEditor
• 文檔：http://www.kancloud.cn/wangfupeng/wangeditor/65722

　　

　　另外，我近期正式開啟了移動端編輯器的開發工作，現在已經開發了一部分了，可以看看效果。不過目前功能還未開發完善，性能和用戶體驗也需要進一步優化，預計會在兩周之后發布一個測試版給大家試用。

　　

　　手機掃描二維碼預覽Demo（功能不全面）

 　　 

3. 產品一年的變化

　　記得我之前寫過一篇文章《我為什么要做富文本編輯器wangEditor5個月總結》現在回過頭來回憶一下，感覺還是挺有意思的，感覺自己也挺能折騰。

 

　　3.1 UI界面

　　wangEditor最早的時候UI是這樣的，當時還依賴于bootstrap這么一個龐大的UI庫。

　　

　　后來經過了很多次改版（有興趣的同學可以看看上面的文章）和UI升級，才到現在官網上這個樣子，大家可以對比一下。一年之前和現在，UI是不是漂亮很多了？

　　　　 

 

　　3.2 功能

　　一年之前剛剛推出的時候，功能非常簡單，大家可以從上文的界面中看出來。一年之后的現在，編輯器幾乎涵蓋了項目常用的大部分功能。除了最初有的基本功能之外，后面加的主要功能有：

• 查看更新源碼
• 引用
• 表情和分組表情
• 插入視頻
• 插入代碼以及配置高亮代碼
• 圖片上傳（支持跨域和非跨域）
• 插入代碼已經配置代碼高亮

以上都是和UI有關的功能，還有很多和UI無關的功能，例如支持AMD、CMD……

　　這些功能有些是我自己主動加的，也有一些是使用者提出來，我覺得合理加上的。

 

　　3.3 技術

　　一年之內，我對wangEditor進行了2次重構，這其實就是在開發過成功不斷摸索慢慢步入正軌的過程。而現在我正在計劃第三次，最晚會在元旦之后展開。

　　第三次重構并不是我對當前系統架構的否認，而是一次徹底的升級。現在的框架設計，如果全是我自己來開發，一點問題都沒有。這幾個月大家提出的問題，我基于現在的框架修改絕大部分情況下得心應手。

　　第三次重構我的目標是——徹底的組件化，支持自定義擴展菜單，支持插件機制和多人開發。自己個人畢竟精力有限，我要通過重構框架，將每個功能點都分離、將系統可擴展化。這樣就為其他開發人員開放了接口，可以接入他們想要的東西！

 

　　另外，這一年的時間，到現在我已經為wangEditor進行了173次的代碼提交，平均每2天一次commit。唉，我也是一個上班族，時間真的都是擠出來的。

　　最后，解決的bug我沒數過，github的issues中有將近60個問題，不過那是后來才慢慢開始用起來的。要算實際數量，得是這個數的N倍。各位同行不要見笑，bug發現的多，不一定是壞事兒，發現不了才是壞事兒，你懂得。。。

 

　　3.4 其他

　　在這一年之內，除了UI、功能、技術上的改進，我還慢慢的為產品開展了以下平臺，這些也都是運營一個產品所必須的。

　　QQ群（164999061）：一開始沒有QQ群，這是后來，我也忘記什么時候了，一個使用者提出可以鍵一個QQ群討論問題。人也是在慢慢的增長，現在有260多個人。

       Github issues: 這也是一個使用者的建議，說以后問題都要記錄在測，我作為作者不能整天泡在QQ群解答問題，那不成了客服了嗎？——有道理——不過想改變大家提問的習慣，可不是個簡單的事兒，后文會詳細解說這一點。不過目前issues里面已經積累了將近60個問題，也算是終于起步了。

　　官網：一年之前是沒有這個wangEditor這個網站的，我后來申請了域名，做了一個還算漂亮的官網，也算是有門面的產品了。

　　文檔：我印象中好像大半年沒有文檔，一些基本使用都寫在github的README里面，但是那里根本就寫不開呀。后來我自己寫文檔頁面放在官網上。由于官網托管在github，有些人反應訪問慢，于是又更換到了kanclound.cn這個平臺上，感覺還是很不錯的。

 

　　3.5 小結

　　我不知道你在看以上總結的時候感覺如何，我寫完這一段之后，感覺手都酸了——怎么一年之內折騰了那么多事兒啊？？這還是簡單寫的，要詳細寫得寫本書了。當然寫了書也估計沒人買——wangEditor知名度目前還非常低。

　　但是——我希望在明年的這個時候再寫總結的時候，還是要寫到手發酸才好！——我接下來的一年還要接著折騰。

 

4. 如何對待產品用戶

　　4.1 發發我的牢騷

　　從創建了QQ群，用戶不斷的加入，我慢慢的出現了如何對待用戶的困惑。如果你沒有這個體會，聽我給你慢慢道來。

　　一開始，QQ群就那么幾個人，怎么都好說，有問題說問題，聊天扯淡也OK。后來慢慢人多了幾十個人了，我還是以雷鋒為榜樣，只要有問題，我就第一時間趕上去，交流然后解答。這樣一直持續了好久，我當時對此也樂此不疲。

 

　　再后來人多了時間久了，我發現不對勁兒，有些人問問題不懂得怎么問。

　　這里先插一句：問問題和通過百度搜索問題一樣，這是有學問的。例如你輸入一些錯誤提示關鍵字，很可能就找到了答案，但是你輸入『這兒運行不出來』，你試試，搜一年你也搜不出來。運行不出來？哪兒運行不出來，誰知道啊？讓我看那就是你自己的能力不行、腦袋不行。

　　接著說，有些人提問就是這樣。在群里說一句：『我的菜單圖標不顯示啊』就完了，再好點的還能貼個圖給你。各位你說你如果作為作者、群主遇到這種情況該如何處理？

　　我一開始是追問：怎么不行、哪兒出不來、什么瀏覽器、提示什么錯誤、下載的代碼有沒有字體文件……因為一個錯誤可能會有很多種情況造成的，你得一個一個判斷呀。

　　后來也是經過一個人的提醒，說：你不能再當客服了，你得集中精力做產品升級呀，這是你的核心價值。你應該提供文檔、提問接口，讓用戶自己看文檔自己提問。

　　我覺得很有道理，于是就這么做了。但是這么做的后果就是在很長一段時間，我一直不斷的在QQ群發『看文檔』、『去githut提交問題』……說了不知道多少遍。到現在，我還一直在群里說『新加入的同學請閱讀群公告』……

　　 

 

　　4.2 我的看法

　　下面我拋開自己是一個產品作者的身份談談提問這件事。

　　有一句話：老練的程序員都是改bug改出來的。這句話雖然不全面，但是卻說出了一個重點內容。遇到一個問題，你都不去主管思考，上來就去提問，這本身就是對自己的極不負責任。

　　我平時的工作有幾乎一半的時間在改bug（其實百度的產品bug也不少，要不然要那么多開發人員干嘛），我要是到處找人去問，誰有那么多時間伺候我。還不是自己去跟蹤、斷點、分析、查詢，來解決嗎？不親自去查一查，你怎么就知道這個問題你自己解決不了。

 

　　4.3 對待用戶的思考

　　現在回到我的角色，我作為一個產品的主導者、開發者，想用戶去推廣這個產品的時候，如何面對用戶的各種使用習慣——我覺得關鍵在于要去帶頭建議一種環境和平臺來引導用戶。

　　這個開始雖然很難、很慢，但是一旦建立起來，就會比較自然順暢。例如一個新的使用者解決的第一個問題是從github issue得到的答案，那么他遇到第二個問題自然而然回去github issue查詢，如果沒有他當然也會在這個平臺提問。

　　如果他后來遇到了另一個新來的，他肯定會告訴他，去github issues里可以找到答案。

　　我想到一句和『授人以魚不如授人以漁』類似的話——給人一個答案，不如給他一個平臺和環境。

 

5. 為什么重構

今天的文章其實和技術沒有多少關系，重點講述我對產品的認識。不過它絕對不是一片軟文，它再次也算是我的一些經歷和一些故事。

　　對于產品的重構其實已經是一個很老的話題了，從我們看到很早的書籍就說：產品就是要完善完善再完善、重構重構再重構。但是我所說的是——不要為了重構而重構。重構一定是要解決一個重量級的問題，非重構而不可的問題。

　　

　　在此我想簡述一下我計劃的下一次重構對wangEditor的一些影響。

　　現在大家遇到一些比較棘手的需求，還是需要求助于我，我沒辦法去解決的那就算了（例如之前有人提出增加公式，我就沒答應，因為就他自個用）。很多人提出了插件機制，我也想過，但是現在的代碼框架，確實不足以完美支持。我現在急需這個功能。

　　另外，目前項目就是我一個人維護，其實還有其他人想一起來為項目貢獻代碼。但是現在代碼結構比較緊湊，除了我，別人還不好插手。所以，下次重構組件化和模塊化也是一個重點。要讓各個模塊和組件之間相互不影響，保持獨立性，又讓整體保持擴展性。

　　所以，期待我的下次重構吧。有意向咱們可以一起寫代碼。

6. 產品營銷的困惑

　　之前閱讀《市場驅動的新產品研發項目管理》一書，記住了上面的一句話——一個企業的核心競爭力有兩點：一個是技術，一個是營銷。我曾經問過一個今年剛剛畢業的同事，問他能不能理解，他說不能。我不知道您現在看到這句話能不能理解，反正我是小有感觸。

　　就拿wangEditor來說，我如何讓大家都知道這個產品？如何推廣出去？現在是我很大的一個困惑。特別是對于這種不知名的個人開發的產品（大牛和大公司推出的產品好推廣），縱然你有一腔熱血，但是無人知道，你說是不是很郁悶。現在你知道為何『營銷』是核心競爭力了吧。如果咱倆有同樣的產品，你先讓大家知道了，那么你就贏了。

　　現在這塊正是我的一個困惑。寫一篇博客推廣吧，上次寫的某某版本發布，被博客園踢出了首頁。大家如果有好的建議，不妨提交給我，萬分感激。

7. 關于移動端編輯器

　　移動端編輯器的開發，最初是由群里的幾個同學提出來的，需求量并不大。如果是就幾個人提出一個PC端的個性需求，我直接就拒絕了。我也跟很多人聊過，大部分的反饋都是大家不會用手機去編輯什么打內容的片段。

　　我之所以啟動移動端編輯器，是因為現在網絡上根本沒有哪怕是不成熟的移動端編輯器。那些所謂兼容移動端的編輯器，無非就是UI上做了個響應式的布局而已，用戶體驗上根本不適合手機觸屏操作。

　　沒有的東西我就要去做，蘋果都未移動端準備了ipad pro 我為何不能做一個小小的編輯器呢？至于以后發展如何，我現在不管，想多了啥也干不成。

　　

　　雖然開發剛剛啟動，但是想法和規劃早在兩個月之前就開始了，我也經過了大量的調研、思考、實驗，最終確定了現在的實現思路。

　　

　　手機掃描二維碼預覽Demo（功能不全面）

 　　

 

　　接著說。我本來想把菜單欄緊貼在虛擬鍵盤上方，可以猶豫技術限制、又是一個插件，做不到這一點，因此只好做一個取舍，放在了上面。 

　　在我看來，手機端和PC端最大的區別就在于手和鼠標的不同。鼠標可以輕松選區一段文字進行操作，而手指則無法輕松做到。因此，手機端的編輯器的功能和操作肯定要和PC端的不一樣。具體的大家可以去demo中體會。 

　　另外，在移動端大家不可能做很大篇幅的編輯操作，因此需要的功能就更為精簡。基本的文字粗體、顏色、標題，外加上傳圖片、拍照上傳（重要），還有表情，就OK了。

　　最后，在開發移動端編輯器的時候，我一定會增加用戶自定義配置、擴展菜單的功能。有些特殊的需求，自己來開發就OK了。 

8. wangEditor的初衷變了嗎？

　　唉媽呀，寫了將近三個小時，洋洋灑灑將近5000字，這得頂的上多少篇高考作文啊！其實我很討厭這種冗長的東西，不過沒有這些內容，今天的話題就說不完。如果看這篇文章的你沒有耐心看完，那么也不是你的錯。

如有錯別字，請多多包涵。。。。 

　　最后我想說，wangEditor做上文這樣的規劃，是不是違背了它當時的初衷和定位了呢？一開始做wangEditor，我對它的定位是——一款最簡單、易用的編輯器。

　　重量級的復雜的編輯器（如百度ueditor、kindeditor）什么都有，插件豐富，但是使用起來沒有那么方便、UI也丑的要死。wangEditor要跟他們形成互補——UI設計的最漂亮、使用最簡單、要輕量化。

　　我的觀點是，wangEditor最初的定位和初衷，到現在根本沒有變化，后面也不會有變化。而我現在要做的，是讓它跨步到一個更高級的層次，無論是對于我、未來的其他代碼貢獻者、還是這個產品的使用者。

　　wangEditor已經不再是一個技術人員的練手實驗品，而它將繼續是一款更好的產品，我也會為此而付出更多的努力來。

　　編輯器這個東西很小，但是別忘了，絕大部分web系統都需要，絕大部分網民都需要，這樣它就會變得很大！

 

　共勉！

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

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

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

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

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