如何讓layui支持wangEditor編輯器

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

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

wangEditor.min.js模塊代碼

比如引用一個123.js"123.js" 基本配置編輯器模塊代碼如下layui.config({      base: '../lib/wang/' //wangEditor.min.js目錄，根據自己存放位置修改// 比如我的位置：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(); //創建編輯器//一般在執行按鈕操作時使用 var html = wang.$txt.html(); // 獲取內容,更多方法，請wangEditor編輯器官網 console.log(html);//一般在執行按鈕操作時使用});

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

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

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

編輯頁面

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

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