layer 子页面传值给父页面的markdown编辑器

这是一次非常折腾的事情,主要原因出在我不知道怎么样直接将值添加到markdown里面。
首先看点开子页面的图片

layer 子页面传值给父页面的markdown编辑器

子窗口

要求

点击插入模板处,关闭子窗口的同时将插入模板的值传给父窗口。
插入模板处的代码,目前采用直接将值写在了隐藏层中,过回准备在a中加入id值,用ajax根据id再次取值。

<td><a class="templatebody">插入模板<div style="display: none;">{$vo.content_md}</div></a></td>

js代码

<script>
    $('.templatebody').on('click',function(){
    var body_md = $(this).children("div").html();

    parent.$('#sonlayer').html(body_md); //将值传给父窗口,如果能直接在markdown中插入内容,父窗口会省很多力
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);
});
</script>

父窗口

分析了一下markdown提供的案例,发现一种可以传值给编辑器的方法。

先定义一个隐藏区

因为不知道如何将子页面的那些值直接传入到父页面的layer里面,只能采用曲线救国,先将值写入一个隐藏域中,再用Js读取这个值。
下面是隐藏域。

<div id="sonlayer" style="display: none;"></div>

用过markdown都知道的编辑框代码

<div id="test-editor">
                            <textarea style="display:none;" name="content_md" ></textarea>
                        </div>

markdown编辑器定义区

var editor;

    $(function() {
        editor = editormd("test-editor", {
            ....这里省略定义的内容
            )};
        )}

与平时的不同,这里多了var editor,方便下面接收内容。
接着在上面代码的最后处加上将内容写入编辑器中的代码,完整的变成

var editor;

    $(function() {
        editor = editormd("test-editor", {
            ....这里省略定义的内容
            )};
        )};

          //插入模板
$('.templatelist').on('click',function(){
        layer.open({
            type: 2,
            title: '插入模板',
            shadeClose: true,
            shade: 0.8,
            area: ['40%', '50%'],
            content: ['/u/late/list/','no'],
            end: function(){
                var sonlayer = $('#sonlayer').text(); //获取隐藏区域的内容
                editor.insertValue(sonlayer); //插入到编辑器中
                editor.focus(); //插入到的位置是光标后面
            }
        });  
});

整体实现是挺折腾的,如果知道父窗口的layer如何接收子页面的值,或者知道如何将值直接插入到markdown里面,都能省很多事。

后期再折腾吧,目前先完成功能为主。

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND