1. 前言
wangEditor富文本編輯器(www.wangEditor.com)從去年11月份發布,至今已經有將近10各月了。它就像一個襁褓中的小嬰兒,在我的努力以及眾多使用者的支持下不斷摸索、成長。就像這么大的小孩一樣,它的下一個目標是要自己站起來、自己走下去。
而這一版本的更新,已經可以讓它有足夠的力量站起來,勇敢的走下去。( wangEditorQQ群:164999061 ,歡迎加入交流)
2. 產品觀的轉變
在此前的一段時間,通過用戶的反饋以及自己的一些比較、思考,覺得wangEditor還是有很多不完善的地方。於是,我不斷的思考改進,完善產品的同時,也在轉變着自己做產品的觀念。
例如,一些很簡單的功能,用戶不去看文檔,而是跑QQ群問我,然后我再把文檔鏈接發給他。一開始我抱怨用戶不認真看文檔。后來,我越來越覺得是自己做的不夠好。用戶不去看文檔,大部分原因肯定在於自己的文檔頁面沒有做好。
再例如,配置上傳圖片時,后台的代碼我是用C#寫的,就會有好多人跑來問我:php的怎么寫?java的怎么寫?……我也不知道怎么寫,我現在搞前端搞的C#都快不會寫了。為何用戶要這么問我——因為我的產品涉及到了領域,如果涉及不到這個領域,用戶肯定不會問我的。
再例如,網站首頁雖然沒有人提出過意見,但是我總是覺得有些問題。難看說不上,但是如果我是用戶,我已進入網站首頁,我應該首先看到什么?於是這一版本我就改了首頁,分享給一些用戶看,他們都說比之前的好一些。
通過修改以上問題,我逐步改變了自己做產品的觀念,主要集中在以下幾點:
- 把用戶當傻子,誰的產品能應對更傻的人,誰的產品就更易用;
- 做好產品定位,不擅長或者沒必要的領域,千萬不要涉及。要用,就搞一個集成方案;
- 學會主動,主動給用戶帶來驚喜,哪怕是很小的;
3. 修改官網首頁
再美的人,也需要漂亮衣服的襯托,有一個漂亮的主頁,能多吸引用戶幾秒鍾的時間。相比於之前的首頁,改版之后的首頁(www.wangEditor.com),更加突出了內容和重點,這也是現在扁平化設計的一個核心思想。
用戶進入首頁之后,首先看到的就是主標題和副標題,知道這是個什么東西(要不然心里肯定暗罵“什么鬼”了)。然后接着看到的就是那么大的一個demo演示,看到這里,用戶就能徹底明白這個東西的作用了。另外,如果想繼續了解,可以翻看下面的介紹,也可以點擊上面的鏈接。
互聯網速食時代,內容才是王道!
4. 修改文檔頁面
之前,wangEditor的文檔頁面一直是一個很大的詬病,才導致了用戶不看文檔而是跑QQ群問我問題。而現在,一個文檔頁面(www.wangeditor.com/wangEditor/docs/),可以解決你所有的使用問題,左側導航、右側內容的方式,也是目前文檔頁面的常用風格。
而且,文檔導航中,對功能進行了分類:基本應用、基本配置、圖片上傳、其他,把同類的功能,組合在一起。
最后,對圖片上傳(跨域、非跨域)這個比較復雜的配置,錄制了視頻進行演示,並提供視頻中演示代碼的下載。(夠意思吧!!)
5. 修改圖片上傳方式
圖片上傳之前一直是wangEditor的詬病,此前用戶提出的問題中,大約有1/3到1/2跟圖片上傳有關。所以,我從很早就開始憋着要好好搗鼓搗鼓圖片上傳。
5.1 非跨域上傳
在目前的使用者中,用到跨域的還不是特別多。
本次修改中,非跨域上傳講采用plupload這個偉大的插件,站在巨人的肩膀上嗎,哈哈。plupload插件的功能非常強大,什么多文件上傳、拖拽、限制類型大小、預覽這些都能搞定,這樣就不用我自己開發啦。
而且,是需要用戶自己開發一個plupload上傳組件,然后集成到wangEditor中。這樣就把wangEditor和上傳組件分離開了,上傳圖片的功能、頁面樣式,完全用戶自己控制。(不要一定說“組件”、“集成”就想象的很復雜,其實很簡單的,看看文檔就知道了)
當用戶沒做任何配置的時候,點擊“菜單”按鈕這樣顯示(只能插入網絡圖片):
配置了上傳組件之后,點擊“菜單”按鈕,就這樣顯示(能上傳本地圖片,也能插入網絡圖片):
這個變化,是由系統自動處理的。怎么樣,是不是很神奇?
另外,我專門為配置圖片上傳錄制了視頻演示,以及下載視頻中的代碼,在文檔中鏈接。
5.2 跨域上傳
首先,這里恭喜先前使用wangEditor上傳圖片的用戶(先前wangEditor只有跨域上傳),本次更新的跨域上傳向下兼容,你們之前的配置現在同樣有效!同時,本版本做的更加易用。之前插入網絡圖片和上傳圖片是兩個菜單,現在合並成了一個。
沒有配置該功能時,點擊“菜單”按鈕這樣顯示(只能插入網絡圖片):
配置了url地址之后,點擊“菜單”按鈕,就這樣顯示(能上傳本地圖片,也能插入網絡圖片):
另外,我專門為配置圖片跨域上傳錄制了視頻演示,以及下載視頻中的代碼,在文檔中鏈接。
6. 合並同類菜單
我一直覺得,之前wangEditor的菜單太多,這樣就導致如果width太窄,菜單就會換行,換行就不好看。再者,菜單太多了,導致界面混亂,應用性差。
因此,我把同類的菜單合並起來,這樣既能讓界面更加簡潔,又不失用戶體驗。
7. 總結
以上就是本次更新的主要內容,希望大家能多多支持這款產品。
也歡迎給我捐贈,為開源軟件加注你的一份能量!
-------------------------------------------------------------------------------------------------------------
歡迎關注我的教程:
《使用grunt搭建全自動web前端開發環境》《從設計到模式》《json2.js源碼解讀視頻》
《深入理解javascript原型和閉包系列》《css知多少》《微軟petshop4.0源碼解讀視頻》
------------------------------------------------------------------------------------------------------------
也歡迎關注我的開源項目——wangEditor,輕量化web富文本編輯器
-------------------------------------------------------------------------------------------------------------