【個人產品觀】開發wangEditor一年總結

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富文本編輯器

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