• 使用layer弹出Ueditor实现父子传值


    Layear的代码:

        function tankuang() {
            layer.open({
                type: 2,
                title: false,
                area: ['800px', '400px'],
                closeBtn: 0,
                shadeClose: true,
                skin: 'yourclass',
                content: '@Url.Action("PartialView", "UEditor")',
            });
        }

     Ueditor代码:

        var editor = new baidu.editor.ui.Editor({
            UEDITOR_HOME_URL: '/Scripts/ueditor/',//配置编辑器路径
            iframeCssUrl: '/Scripts/ueditor/themes/iframe.css',//样式路径
            initialContent: '',//初始化编辑器内容
            autoHeightEnabled: true,//高度自动增长
            minFrameHeight: 500,//最小高度
            autoFloatEnabled: true,
    
    
            initialFrameWidth: 784,
            initialFrameHeight: 400
    
        });
        editor.render('editor');
    

     获取按钮中的值:

      function getValue(val) {
            btnValue = val;
        }
    
     <input type="button" name="zhishi" id="zhishi" value="基础讲解" onclick="tankuang(); getValue(this.value)" />
    

     用div来显示图片,textarea的值存入数据库

                     <div>
                        <div id="knowledgeTitle" style="display:none;float:left;70px;">知识点标题</div>
                        <input type="text" name="titleValue" value="" id="txtContent" hidden="hidden" />
                    </div>
    
                    <div>
                        <textarea id="divOneyc" name="editorOne" hidden="hidden" rows="10" cols="40"></textarea>
                    </div>
    
                    <div id="knowledgeContent" style="display:none;float:left;70px;">知识点标题</div>
                    <div id="divOne" name="editorOne" style=" 700px; height: 400px; border: black 1px solid; font-size:small; line-height:1; overflow:auto;"
                         hidden="hidden">
                    </div>
    

     同步值

        //同步和Index的内容
        function getPlainTxt() {
            var arr = [];
            arr.push(UE.getEditor('editor').getPlainTxt());
            localStorage.removeItem("code");
    
            localStorage.setItem("code", arr.join('
    '));
            var data = localStorage.getItem("code");
            if (data && data.length > 0) {
                parent.mes = arr.join('
    ');
                parent.document.getElementById('divOne').innerHTML = data;
                //给textarea获取值
                parent.document.getElementById('divOneyc').innerHTML = data;
    
            }
            parent.layer.closeAll();
            
            parent.document.getElementById("knowledgeContent").style.display = "block";
    
            parent.document.getElementById("divOne").style.display = "block";
            //让textarea永远隐藏
            parent.document.getElementById("divOneyc").style.display = "none";
    
            //同步标题的内容
          
            var title = document.getElementById("title").value;
    
            localStorage.removeItem("valuetxt");
            localStorage.setItem("valuetxt", title);
            var txtValue = localStorage.getItem("valuetxt");
            if (txtValue && txtValue.length > 0) {
                parent.document.getElementById("knowledgeTitle").style.display = "block";
                parent.document.getElementById("txtContent").value = txtValue;
            }
    
            parent.document.getElementById("txtContent").style.display = "block";
        }
    
        <div>
            知识点标题
            <input type="text" class="biaoti" name="biaoti" value="" id="title" />
        </div>
    
        <div>
            基本内容
            <textarea id="editor" name="editor"></textarea>
        </div
    

     效果:

    父页面显示的效果:

  • 相关阅读:
    二维数组排序
    正则验证
    yii2视频教材
    yii2数据库简单操作
    MySQL(zip版)安装教程
    OpenCV插件
    机器视觉项目总结——光源
    VS2017运行YOLOv4
    VS打开cmd(直接在项目路径)
    【转载】Win10安装Ubuntu子系统
  • 原文地址:https://www.cnblogs.com/sunliyuan/p/8891602.html
Copyright © 2020-2023  润新知