我爲何要作富文本編輯器【wangEditor5個月總結】

時間 2019-11-24

標籤爲何文本編輯器 wangeditor5 wangeditor 個月總結简体版

原文原文鏈接

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

---------------------------------------------------------------------css

1. 爲何要作富文本框？

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

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

　　所以，我要作一個最簡單易用的富文本編輯器。因而乎在2014年11月，我推出了開源富文本編輯器——wangEditorjquery

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

2. 產品如何定位？

　　一個產品推向市場，勢必會面臨着用戶和競爭對手，如何讓用戶使用本身的產品而不用競爭對手的產品，這是必需要考慮的問題。git

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

　　同理，對於富文本編輯器來講，也是20%的功能知足80%的需求，剩下的80%的功能只是爲了那20%的需求。我要作的就是這20%的功能，去知足你們80%的需求。若是你想要大而全富爾美，那麼wangEditor知足不了你（這會讓你付出不少代價）；若是你想用最快的方式知足你最主要的需求，那就請使用wangEditor。web

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

　　wangEditor使用教程以下：https://github.com/wangfupeng1988/wangEditor#1-%E4%BB%8B%E7%BB%8D，應用很是簡潔，你們能夠去看看。json

　　不要覺得作簡單了就沒人用。你們對Visual Studio、Eclipse有需求，可是editplus這種輕量級的軟件，你就不用了嗎？bootstrap

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

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