优点:封装组件方便多个页面调用,减少代码重复。
/**
@Name : 添加富文本编辑弹框
@Author:hsianglee
*/
layui.define(['jquery', 'layer', "urp","layedit"], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var urp = layui.urp;
var layedit = layui.layedit;
var isopen = false;
var openHtmlEdit = {
render: function (optionsParam) {
var el = optionsParam.el || "";//绑定事件元素
var callbackFunction = optionsParam.callbackFunction || "";
var InitData = optionsParam.InitData || ""; //textarea需要的赋值
var Tag = optionsParam.Tag || "";//额外传参
callbackFunction = openHtmlEdit.handleCallbackFunction(callbackFunction);
if (!el) return layer.alert("容器节点el不能为空");
var str = [
'<div class="layui-card">',
'<div class="layui-card-header"> 添加备注',
'</div>',
'<div class="layui-card-body">',
'<textarea class="layui-textarea" id="openEditRemark" name="openEditRemark"style="display: none;"></textarea>',
'</div>',
'</div>',
].join("");
if (!isopen)
{
$(document).on("click", el, function (data) {
isopen = true;
var index = layer.open({
title: ''
, type: 1
, move: false
, content: str
, area: ['70%', '70%']
, btn: ['确认', '取消']
, btnAlign: 'c' //按钮居中
, shade: 0.5 //不显示遮罩++++++++++++
, maxmin: false
, success: function (layero, index, that) {
var options = {
tool: [
'strong' //加粗
, 'italic' //斜体
, 'color'
, 'size'
, 'underline' //下划线
, 'del' //删除线
, '|' //分割线
, 'left' //左对齐
, 'center' //居中对齐
, 'right' //右对齐
, 'link' //超链接
, 'unlink' //清除链接
],
height: $(document).height() - 500
};
layedit.build('Remark', options);
var options = layedit.build('openEditRemark', {
height: 155
}); //建立编辑器
$("#openEditRemark").val(InitData);
}
, yes: function (d) {
if (callbackFunction) {
var value=$($("#layui-layer" + d).find("iframe")[0].contentWindow.document).find("body").text();
top.layui.callbackFunction[callbackFunction](value, Tag);
}
}
, btn3: function (d) {
layer.close(index);
}
});//打开弹出框
});
}
return {
changeStatus: function (data) {
var win = $(el).find(".urp-file-mgr").get(0).contentWindow;
var readOnlyEl = $(win.document).find("#uploadBtn,.del,.row-del,.layui-upload-drag,.qrcode,.suspendedBall");
if (data === "1") {
readOnlyEl.addClass("layui-hide");
$(win.document).find(".createFolder").addClass("layui-hide");
} else if (!win.IsLock) {
readOnlyEl.removeClass("layui-hide");
if (win.CreateFolder) {
$(win.document).find(".createFolder").removeClass("layui-hide");
}
}
if (win.app) {
win.app.IsReadOnly = data === "1" ? true : false;
} else {
win.IsReadOnly = data === "1" ? true : false;
}
}
}
},
handleCallbackFunction: function (callbackFunction) {
if (!callbackFunction) {
return;
}
var fn = callbackFunction;
// 函数名拼接字符串,防止函数名重复
top.layui.callbackFunction.index++;
callbackFunction = top.layui.callbackFunction.index + "" + callbackFunction;
top.layui.callbackFunction[callbackFunction] = layui.urp.callbackFunction[fn];
return callbackFunction;
},
}
var el = $(".openHtmlEdit");
if (el.length !== 0) {
var optionsParam = {
el: ".openHtmlEdit",
InitData: optionsParam.InitData || "",
callbackFunction: option.callbackFunction||"",
Tag: option.Tag ||"",
}
openHtmlEdit.render(optionsParam);
}
exports('openHtmlEdit', function (optionsParam) {
return openHtmlEdit.render(optionsParam);
});
})
<button class="layui-btn layui-btn-xs BtnRemark1"> 添加备注1</button>
layui.use(['jquery',"urpFileMgr", "layedit","openHtmlEdit"], function () {
var $ = layui.jquery;
var layedit = layui.layedit;
var openHtmlEdit = layui.openHtmlEdit;
//#region 弹出层富文本编辑器添加备注
urp.callbackFunction.refreshCallBack = function (data) {
console.log(data);
};
openHtmlEdit({
el: ".BtnRemark1",
InitData: "",
callbackFunction: "refreshCallBack",
Tag: "",
});
//#endregion