使用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;width: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;width:70px;">知識點標題</div>
                <div id="divOne" name="editorOne" style="width: 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('\n'));
        var data = localStorage.getItem("code");
        if (data && data.length > 0) {
            parent.mes = arr.join('\n');
            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

 效果:

父頁面顯示的效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM