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>
目录
相关文章
|
8月前
|
JavaScript
js点击button,在页面上创建一个三行四列的表格
js点击button,在页面上创建一个三行四列的表格
178 0
|
7月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
178 0
|
10月前
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
300 0
|
8天前
|
JavaScript 前端开发
vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程
这是一个Vue.js组件代码示例,展示了带有侧边栏导航和面包屑导航的布局。模板中使用Element Plus组件库,包含可折叠的侧边栏,其中左侧有 Logo 和导航列表,右侧显示更具体的子菜单。`asideDisplay`控制侧边栏宽度。在`script`部分,使用Vue的响应式数据和生命周期钩子初始化路由相关数据,并从localStorage恢复状态。样式部分定义了组件的颜色、尺寸和布局。
15 1
|
2月前
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
93 1
|
4月前
|
前端开发
如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中
如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中
25 0
|
5月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
8月前
|
JavaScript
js左划出现删除按钮,右滑隐藏demo效果示例(整理)
js左划出现删除按钮,右滑隐藏demo效果示例(整理)
js左划出现删除按钮,右滑隐藏demo效果示例(整理)
|
9月前
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下,也是在公司用到的一个例子,刚刚解决,正好趁热打铁。前端页面是采用BootStrap框架搭建的,主要的样式涉及到项目,在这里就不截图了,直接上代码:
84 1
[Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖。
点击图片进行预览,但是还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行,那么该如何解决呢?