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

简介: 该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。

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


子页面的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>
目录
相关文章
|
JSON 前端开发 JavaScript
富文本编辑器Ueditor实战(三)-springboot集成
通过本文,您可了解springboot如何集成ueditor,如何自定义扩展后端的文件上传功能。
693 0
富文本编辑器Ueditor实战(三)-springboot集成
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
136 0
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
598 0
|
Java 应用服务中间件 对象存储
富文本编辑器Ueditor实战(二)-图片上传
本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。
852 0
富文本编辑器Ueditor实战(二)-图片上传
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
461 0
|
前端开发 JavaScript 搜索推荐
前端封装库/工具库的编辑器之UEditor
随着互联网时代的到来,Web应用程序的内容创作和编辑变得越来越重要。而为了更高效地进行内容编辑和管理,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个经典的编辑器就是UEditor。
137 0
|
开发框架 前端开发 JavaScript
【前端】简单配置使用百度在线文本编辑器UEditor
在本篇文章中,我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用 目前在线编辑器插件网上挺多的,个人觉得UEditor在UI和功能上还是不错的
967 0
|
Java 应用服务中间件 API
富文本编辑器Ueditor实战(一)
本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。
481 0
富文本编辑器Ueditor实战(一)
|
Java
富文本编辑器Ueditor实战(四)-video集成
文章介绍了如何在springboot环境中集成ueditor,以及如何修改配置支持在富文本编辑器中直接预览视频资源。
504 0
富文本编辑器Ueditor实战(四)-video集成