首頁  >  文章  >  web前端  >  jQuery的富文本外掛:wangEditor外掛的使用方法

jQuery的富文本外掛:wangEditor外掛的使用方法

不言
不言原創
2018-08-09 17:50:473266瀏覽

這篇文章帶給大家的內容是關於jQuery的富文本外掛:wangEditor外掛的使用方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

開發時常會用到富文本,今天記錄這個wangEditor也是一個非常好用的富文本外掛。直接上圖使用方法:
1、先是下載插件,這個大家就自行到百度上下載吧
2、引入插件檔案(兩個js,一個css)
jQuery的富文本外掛:wangEditor外掛的使用方法
3 、然後就在js程式碼裡面定義富文本編輯器了
jQuery的富文本外掛:wangEditor外掛的使用方法

<script type="text/javascript">
        var E =  = window.wangEditor
  r        var editor = new E(&#39;#editor&#39;)        
  // 或者 var editor = new E( E( document.getElementByItById(&#39;editor&#39;) )
           editor.customConfig.uploadImgServServer = &#39;上传图片url&#39;;

           editor.customConfig.uploadFileNameName = &#39;上传图片文件夹名&#39;;
           editor.customConfig.uploadImgMaxSMaxSize = 图片限制大小;
           editor.customConfig.uploadImgHeadHeaders = {            
           &#39;Accept&#39; : &#39;multipart/form-data&#39;
        };
           editor.customConfig.debug=tru=true;
           editor.create()
 ()        var editor_value=$(&#39;.content&#39;).html();
           editor.txt.html(edi(editor_value);    
           </script>

其中uploadImgServer就是上傳文字內容中圖片的接口,uploadFileName就是根目錄下上傳圖片的資料夾名了, uploadImgMaxSize就是定義上傳圖片的最大大小
這些配置填寫好後,在需要插入富文本框的地方加入如下代碼:
jQuery的富文本外掛:wangEditor外掛的使用方法

<p id="editor"></p>

p中的id一定要是editor,然後在js裡面寫editor.create()就可以創建富文本框了,效果如下:jQuery的富文本外掛:wangEditor外掛的使用方法

#相關推薦:

javascript事件委託的程式碼實作以及程式碼的最佳化

案例詳解:動態規劃入門(以爬樓梯為例)

怎麼用簡單的js程式碼實作輪播圖捲動效果?

以上是jQuery的富文本外掛:wangEditor外掛的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn