如何讓layui支持wangEditor編輯器

這篇文章主要介紹了如何讓layui支持wangEditor編輯器，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

讓layui支持wangEditor編輯器的方法：

wangEditor.min.js模塊代碼

比如引用一個(gè)123.js"123.js" 基本配置編輯器模塊代碼如下layui.config({      base: '../lib/wang/' //wangEditor.min.js目錄，根據(jù)自己存放位置修改// 比如我的位置：lib/wang/wangEditor.min.js});layui.define(function(exports) {      exports('wangeditor.min', function(){       demo:demo//這句沒用，只是測試      });});//核心來了layui.use(['layer', 'form','wangeditor.min'], function(){  var layer = layui.layer  ,form = layui.form  ,wang=layui.wangeditor('wang');  wang.create(); //創(chuàng)建編輯器//一般在執(zhí)行按鈕操作時(shí)使用 var html = wang.$txt.html(); // 獲取內(nèi)容,更多方法，請wangEditor編輯器官網(wǎng) console.log(html);//一般在執(zhí)行按鈕操作時(shí)使用});

<div class="wang" id="wang">這是編輯器哦</div>

//富文本編輯器配置圖片上傳  wang.config.uploadImgUrl = '../page/upload/upload.aspx '//調(diào)用后臺(tái)方法  wang.config.uploadImgFileName = 'file'// 可自己定義  wang.config.uploadHeaders = {'Accept' : 'text/x-json'};//后臺(tái)上傳返回代碼 //圖片上傳失敗。Response.Write "error|返回的信息"  根據(jù)自己的程序相應(yīng)輸出 ------------成功返回-------------直接輸出圖片路徑地址：如 "/upload/xxxx.jpg"------------成功返回-------------error|返回的信息

下面簡單介紹賦值編輯器內(nèi)容，一般用到文章編輯

編輯頁面

<textarea class="layui-textarea layui-hide//隱藏顯示" name="content" id="content">這里是數(shù)據(jù)庫讀取的文章內(nèi)容</textarea>var editorhtml=$("#content").val() //獲取 textarea的內(nèi)容wang.$txt.html(editorhtml);// 將內(nèi)容添加到編輯器里

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何讓layui支持wangEditor編輯器”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!