封装js组件——弹出层+富文本编辑器

优点：封装组件方便多个页面调用，减少代码重复。

/**

@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