更加簡潔易用——wangEditor富文本編輯器新版本發布


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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM