博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
单页面使用多个编辑器
阅读量:6138 次
发布时间:2019-06-21

本文共 1988 字,大约阅读时间需要 6 分钟。

 

1.单独写一个生成编辑器的 a.html,

2.通过iframe标签引入b.html页面。

3.使用按钮添加或删除iframe,并且动态给每一个iframe添加id和name。

4.切如果iframe所在的标签是隐藏的话,是不会显示的,所以想要做成切换效果就使用opcity:0;透明度,加定位方法。

5.子页面内容

 

5.保存方法:在iframe子页面中return 出编辑器的内容

function getContent() {     var content =  UE.getEditor('container1').getContent();      return content;};

6.可以使用一个隐藏input接收 子页面的内容,这个input同iframe标签放在同级位置。

内容:
//name值是返回给后台的。
//后台得到的数据,将会返回给子页面

7.父页面接收子页面的内容方法

$(".btn1").on("click",function(){  //保存按钮        $("iframe").each(function(){  //遍历iframe            if($(this).attr("name")==$(this).parents(".arrangeCon-each").find(".hiddenIn").attr("id")){ //匹配当前iframe的name和塔同级的input的id值是否相同                var open = $(this).attr("name"); //iframe的name值                var hiddenInp = ''+open+'.window.getContent()'; //需要先将iframe的name值.window.getContent()方法变成字符串。                var ht = eval('(' + hiddenInp + ')');//再转化为对象,生成方法,得到值                $(this).parents(".arrangeCon-each").find(".hiddenIn").val(ht);//将值放入隐藏的input值中提交            };        });    })

8.保存之后加载页面将数据传入子页面中方法:父页面方法

function set($obj){ //$obj是子页面的元素        $("iframe").each(function(){            if($(this).attr("id")==$(this).parents(".arrangeCon-each").find(".hiddenIn").attr("dataId")){ //判断iframe的id值和隐藏的input的dataId值是否相等                var textContent = $(this).parents(".arrangeCon-each").find(".baiduUEContent").html(); //当前标签从后台获得的数据。                var id = $(this).attr("id");//iframe的id值                $("#"+id+"").contents().find(".containerDiv").attr("data",textContent);//获取当前id的iframe的子元素,将从后台获得的数据存放在子元素的data中。            }        });    }

9.子元素获得父元素给的数据方法

s.ready(function(){

    window.parent.set($(".containerDiv"));
    if($(".containerDiv").attr("data")!=undefined){
    s.setContent($(".containerDiv").attr("data"));
    }else{
         s.setContent("");
    };
});

 

转载于:https://www.cnblogs.com/MJ-MY/p/9567152.html

你可能感兴趣的文章
NGUI Label Color Code
查看>>
.NET Core微服务之基于Polly+AspectCore实现熔断与降级机制
查看>>
vue组件开发练习--焦点图切换
查看>>
浅谈OSI七层模型
查看>>
Webpack 2 中一些常见的优化措施
查看>>
移动端响应式
查看>>
python实现牛顿法求解求解最小值(包括拟牛顿法)【最优化课程笔记】
查看>>
js中var、let、const的区别
查看>>
腾讯云加入LoRa联盟成为发起成员,加速推动物联网到智联网的进化
查看>>
从Python2到Python3:超百万行代码迁移实践
查看>>
Windows Server已可安装Docker,Azure开始支持Mesosphere
查看>>
简洁优雅地实现夜间模式
查看>>
react学习总结
查看>>
微软正式发布PowerShell Core 6.0
查看>>
Amazon发布新的会话管理器
查看>>
InfoQ趋势报告:DevOps 和云计算
查看>>
舍弃Python,为什么知乎选用Go重构推荐系统?
查看>>
在soapui上踩过的坑
查看>>
MySQL的字符集和字符编码笔记
查看>>
ntpd同步时间
查看>>