更加簡潔易用——wangEditor富文字編輯器新版本釋出

王福朋發表於2015-08-28

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

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

 

相關文章