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(""); }; });