单页面使用多个编辑器

Posted MJ_MY

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单页面使用多个编辑器相关的知识,希望对你有一定的参考价值。

 

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

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

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

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

5.子页面内容

<div class="containerDiv"><script id="container1" style="height: 400px;"type="text/plain"></script></div>
<!-- 编辑器配置文件 -->
    <script type="text/javascript" src="../Public/ueditor.config.js"></script>
     <!--编辑器源码文件--> 
    <script type="text/javascript" src="../Public/ueditor.all.js"></script>

 

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

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

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

<div class="arrangeCon-each">
    <span>内容:</span>
    <div style="display: inline-block;margin-left: 0 !important;width: 90% !important;" class="layui-input-block layui-form-inp baiduUE">
         <iframe id="openId{$i+1}" name="open{$i+1}"  src="/index.php?g=Seller&m=Lines&a=ideUE" width="100%" height="550px"></iframe>
    </div>
    <input class="hiddenIn" type="hidden" name="activity_content[]" dataId="openId{$i+1}" id="open{$i+1}" value="" /> //name值是返回给后台的。
    <div class="baiduUEContent" style="display: none;">{$trip[‘activity‘][$i][‘content‘]}</div>  //后台得到的数据,将会返回给子页面
 </div>

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")); //调用父元素的set()方法,将子页面的元素传给父元素
    s.setContent($(".containerDiv").attr("data"));  //赋值给编辑器内容区。$(".containerDiv").attr("data)就是从父元素中传过来的数据。
});

 

以上是关于单页面使用多个编辑器的主要内容,如果未能解决你的问题,请参考以下文章

vue使用vue构建多页面应用

如何在多个页面使用同一个HTML片段

前端:单页面应用和多页面应用

单页面和多页面的网页差别比较(SPA)

单个页面出现多个CKEditor编辑器,怎么创建

单页应用及多页应用