layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容

最新推荐文章于 2025-09-11 02:21:06 发布

原创最新推荐文章于 2025-09-11 02:21:06 发布 · 820 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端 #编辑器

文章讲述了如何在前端开发中，通过父页面调用子页面的JavaScript函数，获取由UE.getEditor插件管理的富文本内容，并进行数据验证后提交到服务器的过程。

思路就是父页面调用子页面的函数来获取对应的富文本编辑器内容

子页面的html

<div class="form-group" style="background-color: #fff;">
    <label class="col-sm-2 control-label">反馈描述<i style="color: red; font-size: 16px;">*</i>:</label>
    <div class="col-sm-9">
        <textarea name="" id="feedback-content" cols="30" rows="10" style="display: none"></textarea>
        <script id="feedback-editor" name="content" style="height:400px"type="text/plain"> 
        </script>
    </div>
    <div class="col-sm-1"></div>
</div>

子页面的js

<script>
    var ue = UE.getEditor('feedback-editor', {
        iframeCssUrl: "{!! url('/uedit/themes/iframe.css') !!}",// 引入css
    });
    ue.ready(function () {
        ue.setContent($('#feedback-content').val());
    });
    //用于父页面的调用
    var callbackdata = function () {
        var editorHtml = ue.getContent();//获取富文本内容
        return editorHtml;
    }
    

</script>

父页面js

<script>
    $('#feedback-add-event').on('click', function(){
        layer.open({
            type: 2,
            title: '添加反馈问题',
            shadeClose: true,
            shade: 0.5,
            maxmin: false, //开启最大化最小化按钮
            area: ['70%', '80%'],	// 宽 高
            content: '/feedback/create',
            btn: ['提交反馈', '取消'],
            btnAlign: 'c',
            // zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
            // success: function(layero){
            //     layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
            // },
            yes: function(index, layero,that){

                let iframeWin =  window[layero.find('iframe')[0]['name']];
                let content = iframeWin.callbackdata();//这里是调用子页面的方法，并且 方法返回的内容
                
                let type = iframeWin.$('#feedback-type').val();
                let title = iframeWin.$('#feedback-title').val();
                let urls = iframeWin.$('#feedback-urls').val();
                let namepwd = iframeWin.$('#feedback-namepwd').val();


                
                // if($.trim(title) === '') return iframeWin.$('#feedback-title').focus();
                if($.trim(type) == ''){
                    layer.msg('请输入反馈项目');
                    return false;
                }else if($.trim(title) == ''){
                    
                    layer.msg('请输入反馈问题');
                    return false;
                }else if($.trim(content) == ''){
                    layer.msg('请输入反馈内容');
                    return false;
                }else if($.trim(urls) == '' && $.trim(type) == 7){
                    layer.msg('请输入ERP模块的URL地址');
                    return false;
                }
                else if($.trim(namepwd) == '' && $.trim(type) == 8){
                    layer.msg('请补充收银机的账号密码');
                    return false;
                }
                let others = '';
                if($.trim(type) ==7){
                    others = urls;
                }else if($.trim(type) ==8){
                    others = namepwd;
                }

                let submitData = {type:type,others:others,title:title,content:content};
                if(feedbackSbumitLoading){
                    feedbackSbumitLoading = false;
                    ajax_submit_data('/feedback','POST',submitData,index);
                    
                }else{
                    layer.msg('已经提交数据了请等待！');
                }
                
                
            }
        });
        
    })
</script>