簡歷第二次不渲染(UEditor 首次加載正常,再次打開樣式不渲染)

問題:
人員信息打開,其中簡歷,首次打開樣式加載,超出長度可下拉,但是關(guān)閉后再次打開發(fā)現(xiàn)樣式不加載,無法下拉查看多余部分。
分析:
查看ueditor.all.js(在頁面引入的js),發(fā)現(xiàn)以下代碼

  /**
     * @file
     * @name UE
     * @short UE
     * @desc UEditor的頂部命名空間
     */
    /**
     * @name getEditor
     * @since 1.2.4+
     * @grammar UE.getEditor(id,[opt])  =>  Editor實例
     * @desc 提供一個全局的方法得到編輯器實例
     *
     * * ''id''  放置編輯器的容器id, 如果容器下的編輯器已經(jīng)存在,就直接返回
     * * ''opt'' 編輯器的可選參數(shù)
     * @example
     *  UE.getEditor('containerId',{onready:function(){//創(chuàng)建一個編輯器實例
     *      this.setContent('hello')
     *  }});
     *  UE.getEditor('containerId'); //返回剛創(chuàng)建的實例
     *
     */
    UE.getEditor = function (id, opt) {
        var editor = instances[id];
        if (!editor) {
            editor = instances[id] = new UE.ui.Editor(opt);
            editor.render(id);
        }
        return editor;
    };


    UE.delEditor = function (id) {
        var editor;
        if (editor = instances[id]) {
            editor.key && editor.destroy();
            delete instances[id]
        }
    };

    UE.registerUI = function(uiName,fn,index,editorId){
        utils.each(uiName.split(/\s+/), function (name) {
            UE._customizeUI[name] = {
                id : editorId,
                execFn:fn,
                index:index
            };
        })

    }

})();

在調(diào)用UE.getEditor(‘editor’)初始化UEditor時,先從放置編輯器的容器instances中獲取,沒有實例才實例化一個Editor,這就是引起問題的原因。

  • 在第一次跳轉(zhuǎn)到編輯器界面時,正常的實例化了一個新的編輯器對象,并放入instances,調(diào)用editor.render(id)渲染編輯器的DOM;
  • 第二次初始化時卻僅從容器中取到實例:var editor = instances[id]; 直接返回了editor對象,而編輯器的DOM并沒有渲染。

具體解決:
原代碼

<!-- 編輯器容器 -->
<td class="height-320" colspan="6" style="height: 150px;">
  <div class="height-320" style="width: 100%; overflow: auto auto;">
  <script id="editor" type="text/plain" 
  style="width: 100%; visibility: hidden; height: 100%;"></script>
  </div>
</td>

<!-- js代碼 -->
//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例,如果在某個閉包下引用該編輯器,直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例
var ue = UE.getEditor('editor');

Ext.onReady(function(){ 
    ue.ready(function () {
        //根據(jù)信息項權(quán)限組控制,判斷簡歷是否可用
        if(fieldsDisabled.indexOf("a1701") != -1){
            ue.setDisabled();
            Ext.getCmp('qx').setDisabled(true);
            Ext.getCmp('qx2').setDisabled(true);
        }
        setContent();
        genResume();
    });
});

按照網(wǎng)上的方式添加如下代碼:

$(function(){
    UE.getEditor('editor').render('editor');
})

或者修改如下

$(function(){
  UE.delEditor('editor');
  var ue = UE.getEditor('editor');
})

但是發(fā)現(xiàn)都無效,經(jīng)過多次測試,發(fā)現(xiàn)點擊上一人,下一人時,樣式?jīng)]有問題,而上一人下一人只調(diào)用了setContent()和genResume()。所以采用延遲內(nèi)容加載來解決問題。代碼如下:

//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例,如果在某個閉包下引用該編輯器,直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例
var ue = UE.getEditor('editor'); 

ue.addListener('blur',function(a,b,c){
    document.getElementById("a1701").value = ue.getPlainTxt().trim();
});

ue.addListener('beforepaste', myEditor_paste);
    function myEditor_paste(o, html) {//alert();
}

 Ext.onReady(function(){    
    ue.ready(function () {
        //根據(jù)信息項權(quán)限組控制,判斷簡歷是否可用
        if(fieldsDisabled.indexOf("a1701") != -1){
            ue.setDisabled();
            Ext.getCmp('qx').setDisabled(true);
            Ext.getCmp('qx2').setDisabled(true);
        }
    });
    var fff;
    clearTimeout(fff);
    fff = setTimeout(function() {
        setContent();
        genResume();
    }, 300); 
}); 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容