wangEditorv3.1.1

wangEditor是基于javascript和css開發(fā)的一款輕量級web富文本編輯器，具有免費開源、易用、UI界面精致、與瀏覽器兼容性好的諸多特性，支持npm直接飲用，響應(yīng)式與自動縮放，支持一個頁面多個編輯器，支持多語言，多支持本地圖片上傳，功能非常強大，配置起來也很簡單，開發(fā)人員可以輕松將它內(nèi)嵌于自己的網(wǎng)站或程序。支持一個頁面多個編輯器，支持多語言，多支持本地圖片上傳，配置起來也很簡單，開發(fā)人員可以輕松將它內(nèi)嵌于自己的網(wǎng)站或程序。

功能特色

1、支持 npm 直接引用。
2、支持響應(yīng)式，自動縮放。
3、沒有官方的實例銷毀方案，項目中使用的是作者在github給出的臨時方案。
4、支持一個頁面多個編輯器。
5、不支持一個頁面多個編輯器同時使用地圖。
6、后端需要進行相應(yīng)配置。

使用教程

wangeditor圖片上傳
一、非跨域上傳
1、圖片上傳之前一直是wangEditor的詬病，當(dāng)用戶沒做任何配置的時候，點擊“菜單”按鈕這樣顯示（只能插入網(wǎng)絡(luò)圖片）。

2、配置了上傳組件之后，點擊“菜單”按鈕，就這樣顯示（能上傳本地圖片，也能插入網(wǎng)絡(luò)圖片）。

二、跨域上傳
1、之前插入網(wǎng)絡(luò)圖片和上傳圖片是兩個菜單，現(xiàn)在合并成了一個，沒有配置該功能時，點擊“菜單”按鈕這樣顯示（只能插入網(wǎng)絡(luò)圖片）。

2、配置了url地址之后，點擊“菜單”按鈕，就這樣顯示（能上傳本地圖片，也能插入網(wǎng)絡(luò)圖片）。

wangeditor如何獲取值
1、我們先百度搜索該富文本框的腳本文件，下載回來后，在自己的頁面里引入該腳本。(我們的代碼有用到Jquery，所以也把Jquery腳本引入了）。

2、然后是寫一個DIV，該富文本框是嵌入到這個div里顯示的，接著用JS腳本初始化富文本框。

3、運行頁面后，我們就可以看到頁面上有一個文本輸入框了，而且支持輸入各種格式。

4、我們可以在這個輸入框里輸入帶格式的內(nèi)容，比如H1標(biāo)題文字，帶下橫線的文字，帶背景色的文字，有序列表，表情符號等等。

5、輸入了內(nèi)容，我們怎么獲取得到呢？
我們修改下代碼，添加獲取內(nèi)容的按鈕，點擊按鈕觸發(fā)獲取內(nèi)容函數(shù)，在該函數(shù)上調(diào)用插件的ed.txt.html()方法，可以獲取到富文本框里的內(nèi)容。

6、頁面刷新后，我們點擊按鈕，可以得到富文本框里輸入的內(nèi)容。因為是富文本，所以內(nèi)容里會包含html代碼。

7、如果不想獲取內(nèi)容里的html代碼，只獲取文字內(nèi)容，我們可以把代碼由var text = ed.txt.html(); 改成var text = ed.txt.text();即調(diào)用插件的 text方法，而不是html方法。

8、修改后，刷新頁面，重新點擊按鈕，可以看到只返回了輸入框的內(nèi)容，不包含代碼了。

9、除了在輸入框里輸入內(nèi)容外，我們還可以用腳本為輸入框添加內(nèi)容。
修改代碼，添加設(shè)置內(nèi)容的按鈕。為輸入框設(shè)置內(nèi)容，也是調(diào)用插件的ed.txt.html(text); 該方法的參數(shù)就是要輸入的內(nèi)容。

10、刷新頁面后，我們點擊按鈕，可以看到腳本里設(shè)置的內(nèi)容，已經(jīng)成功輸入到富文本框里了。

更新日志

wangEditor富文本編輯器第一版發(fā)布于2014年11月。2016年1月作者對整個代碼進行了重構(gòu)，發(fā)布 2.x 版本。經(jīng)過本次重構(gòu)，產(chǎn)品保持美觀的UI基礎(chǔ)上，又增加的功能的穩(wěn)定性、框架的靈活性和可配置性。2.x 版本支持到 IE8 瀏覽器，主要體現(xiàn)在以下幾個方面：
1、產(chǎn)品觀的轉(zhuǎn)變
做好產(chǎn)品定位，不擅長或者沒必要的領(lǐng)域，千萬不要涉及。要用，就搞一個集成方案。學(xué)會主動，主動給用戶帶來驚喜，哪怕是很小的。
2、修改官網(wǎng)首頁
再美的人，也需要漂亮衣服的襯托，有一個漂亮的主頁，能多吸引用戶幾秒鐘的時間。相比于之前的首頁，改版之后的首頁，更加突出了內(nèi)容和重點，這也是現(xiàn)在扁平化設(shè)計的一個核心思想。用戶進入首頁之后，首先看到的就是主標(biāo)題和副標(biāo)題，知道這是個什么東西。然后接著看到的就是那么大的一個demo演示。
3、修改文檔頁面
之前，軟件的文檔頁面一直是一個很大的詬病，才導(dǎo)致了用戶不看文檔而是跑QQ群問我問題。而現(xiàn)在，一個文檔頁面，可以解決你所有的使用問題，左側(cè)導(dǎo)航、右側(cè)內(nèi)容的方式，也是目前文檔頁面的常用風(fēng)格。文檔導(dǎo)航中，對功能進行了分類：基本應(yīng)用、基本配置、圖片上傳、其他，把同類的功能，組合在一起。對圖片上傳（跨域、非跨域）這個比較復(fù)雜的配置，錄制了視頻進行演示，并提供視頻中演示代碼的下載。
4、修改圖片上傳方式
圖片上傳之前一直是軟件的詬病，此前用戶提出的問題中，大約有1/3到1/2跟圖片上傳有關(guān)。所以，我從很早就開始憋著要好好搗鼓搗鼓圖片上傳。
5、合并同類菜單
之前軟件的菜單太多，這樣就導(dǎo)致如果width太窄，菜單就會換行，換行就不好看。再者，菜單太多了，導(dǎo)致界面混亂，應(yīng)用性差。