Wangeditor富文本編輯器使用介紹

Wangeditor富文本編輯器是一款基于javascript和css開發(fā)的 Web富文本編輯器，Wangeditor富文本編輯器輕量、簡潔、易用、開源免費(fèi)，產(chǎn)品第一版發(fā)布于2014年11月，2016年1月作者對整個代碼進(jìn)行了重構(gòu)，發(fā)布 2.x 版本，經(jīng)過本次重構(gòu)，產(chǎn)品保持美觀的UI基礎(chǔ)上，又增加的功能的穩(wěn)定性、框架的靈活性和可配置性，對于富文本編輯器來說，也是20％的功能滿足80％的需求，剩下的80％的功能只是為了那20％的需求，我要做的就是這20％的功能，去滿足大家80％的需求，如果你想要大而全富爾美，那么wangEditor滿足不了你（這會讓你付出很多代價）；如果你想用最快的方式滿足你最主要的需求，那就請使用wangEditor，小編下面給大家說說怎么使用吧，希望可以幫助到大家。

Wangeditor富文本編輯器使用介紹圖1

什么是富文本編輯器

富文本編輯器，Rich Text Editor，簡稱 RTE，它提供類似于 Microsoft Word 的編輯功能，容易被不會編寫 HTML 的用戶并需要設(shè)置各種文本格式的用戶所喜愛；它的應(yīng)用也越來越廣泛，最先只有 IE 瀏覽器支持，其它瀏覽器相繼跟進(jìn)，在功能的豐富性來說，還是 IE 強(qiáng)些，雖然沒有一個統(tǒng)一的標(biāo)準(zhǔn)，但對于最基本的功能，各瀏覽器提供的 API 基本一致，從而使編寫一個跨瀏覽器的富文本編輯器成為可能。

貨比三家

與國產(chǎn)編輯器 百度ueditor 和 kindeditor 相比。它輕量、易用、UI設(shè)計精致漂亮。

與國外編輯器 bootstrap-wysiwyg 和 simditor 相比。它文檔易讀、交流方便，更接地氣。

它還會根據(jù)使用者的反饋不斷完善。未來將支持移動版。

制作 demo

編輯器效果如下。

Wangeditor富文本編輯器使用介紹圖2

代碼示例如下。注意，以下代碼中無需引用任何 CSS 文件�。�！

＜！DOCTYPE html＞＜html＞＜head＞

＜meta charset=“UTF-8“＞

＜title＞wangEditor demo＜/title＞＜/head＞＜body＞

＜div id=“editor“＞

＜p＞歡迎使用 ＜b＞wangEditor＜/b＞ 富文本編輯器＜/p＞

＜/div＞

＜！-- 注意， 只需要引用 JS，無需引用任何 CSS ！�。�--＞

＜script type=“text/javascript“ src=“/wangEditor.min.js“＞＜/script＞

＜script type=“text/javascript“＞

var E = window.wangEditor

var editor = new E（‘＃editor‘）

// 或者 var editor = new E（ document.getElementById（‘editor‘） ）

editor.create（）

＜/script＞＜/body＞＜/html＞

修改圖片上傳方式

圖片上傳之前一直是wangEditor的詬病，此前用戶提出的問題中。大約有1/3到1/2跟圖片上傳有關(guān)，所以，我從很早就開始憋著要好好搗鼓搗鼓圖片上傳。

非跨域上傳

在目前的使用者中。用到跨域的還不是特別多。

本次修改中，非跨域上傳講采用plupload這個偉大的插件，站在巨人的肩膀上嗎，哈哈，plupload插件的功能非常強(qiáng)大，什么多文件上傳、拖拽、限制類型大小、預(yù)覽這些都能搞定，這樣就不用我自己開發(fā)啦。

而且，是需要用戶自己開發(fā)一個plupload上傳組件，然后集成到wangEditor中；這樣就把wangEditor和上傳組件分離開了，上傳圖片的功能、頁面樣式，完全用戶自己控制；（不要一定說“組件”、“集成”就想象的很復(fù)雜，其實(shí)很簡單的，看看文檔就知道了）

當(dāng)用戶沒做任何配置的時候。點(diǎn)擊“菜單”按鈕這樣顯示（只能插入網(wǎng)絡(luò)圖片）：