与现有系统集成方式

1 前言


xxxxxxxxxx
本节我们讨论下 如何让布局器与已有系统集成并传递数据

1.1 集成方式


xxxxxxxxxx
我们布局器不像其他的一些js组件，new一个实例，本身布局器页面已经比较庞大了，所以足够作为一个独立的页面存在
将布局器单独部署：可以是nginx也可以是web系统下的任何地方,只要可以实现以http方式访问到index-xxx.html即可

1.2 方式一页面跳转（推荐）


xxxxxxxxxx
您可以采用页面跳转方式，从上一个业务页面跳转到当前布局器，并在url中带参数，当跳转到布局器后，在布局器从url获取参数再进行后端接口交互保存和恢复布局器

1.2.1 例如layui布局器的集成(其他ui雷同)


xxxxxxxxxx
        1 自己业务先建立一个页面 拿到页面主键 pageId
        2 跳转到布局器，地址参数携带此pageId 例如 http://xxx/magicalcoder/index-layui.html?pageId=123
        3 当index-layui.html加载完毕
                        |
                     会自动调用
                        |
         assets/drag/js/user/callback.js
                        |
         进入after_start(api) 布局器加载完后会调用此方法 您可以在此处初始化上一次的数据
                        |
                    自行提供后端接口保存和初始化
                        |
                    如果您点击了保存按钮
                        |
                则自动进入callback.js的save_html方法

更多技术细节请参考
基于layui布局器与现有系统集成细节

1.3 方式二 iframe嵌入


xxxxxxxxxx
您也可以使用iframe在当前页面集成此布局器的地址<iframe url="布局器地址"></iframe>.通过iframe来与布局器交互（稍麻烦）
主要布局器地址必须以http开头的

1.4 方式三 js弹窗这种也是iframe方式的一种


xxxxxxxxxx
如果您使用layui:
         var layer = layui.layer;
            $("#openMagicalDrag").click(function () {
                layer.open({
                    maxmin:true,
                    type:2,
                    content:"/layui?stageFrom=magical_editor&targetElemId=editorHtml"
                })
            })
        //点击保存按钮的回调
        MagicalCallback.prototype.save_html = function (html, rootNode) {
            window.parent.document.getElementById("父页面的某个结构");//获取父界面某个dom结构 剩下的就可以把html暂存进去了
        }

1.5 方式二方式三的具体做法如下


xxxxxxxxxx
页面流程如下：
父页面:parent.html
<html>
    <head></head>
    <body>
        <!-- 布局器保存完会把html插入此处-->
        <textarea class="layui-textarea" id="editorHtml" placeholder="布局器点击保存后的代码将替换此处"></textarea>
        < iframe id="dropInnerIframe" style="width:100%;min-height:100%" src="index-xxx.html?targetElemId=editorHtml"></iframe>
    </body>
</html>
布局器入口页: index-xxx.html
打开callback.js 追加以下内容 仅供参考
//注意新版已经有了getParameter方法
MagicalCallback.prototype.getParameter = function(name) {
    var query = window.location.search.substring(1);
    if(query!=''){
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair.length=2){
                if(pair[0] == name){return pair[1];}
            }
        }
    }
    return null;
}
//当布局器加载完毕执行
MagicalCallback.prototype.after_start = function (api) {
    //var targetElemId = this.getParameter("targetElemId");
    if(targetElemId!=''){
        //获取父页面的目标dom的值
        var targetElem = window.parent.document.getElementById(targetElemId);
        if(targetElem){
            if(targetElem.value != ''){
                api.insertHtml(targetElem.value)
            }else {
                api.insertHtml('')
            }
        }else {
            alert("父页面中无id="+targetElemId+"的元素")
        }
    }
}
//每当布局器有变动就会自动调用此方法
MagicalCallback.prototype.after_workspace_change = function () {
    var targetElemId = this.getParameter("targetElemId");
    if(targetElemId!=''){
        //写入父页面的目标dom节点
        var targetElem = window.parent.document.getElementById(targetElemId);
        if(targetElem){
            targetElem.value = html;
        }else {
            alert("父页面中无id="+targetElemId+"的元素")
        }
    }
}

与现有系统集成方式

1 前言

1.1 集成方式

1.2 方式一 页面跳转（推荐）

1.2.1 例如layui布局器的集成(其他ui雷同)

1.3 方式二 iframe嵌入

1.4 方式三 js弹窗 这种也是iframe方式的一种

1.5 方式二 方式三的具体做法如下

1.2 方式一页面跳转（推荐）

1.4 方式三 js弹窗这种也是iframe方式的一种

1.5 方式二方式三的具体做法如下