简历第二次不渲染(UEditor 首次加载正常,再次打开样式不渲染)

问题:
人员信息打开,其中简历,首次打开样式加载,超出长度可下拉,但是关闭后再次打开发现样式不加载,无法下拉查看多余部分。
分析:
查看ueditor.all.js(在页面引入的js),发现以下代码

  /**
     * @file
     * @name UE
     * @short UE
     * @desc UEditor的顶部命名空间
     */
    /**
     * @name getEditor
     * @since 1.2.4+
     * @grammar UE.getEditor(id,[opt])  =>  Editor实例
     * @desc 提供一个全局的方法得到编辑器实例
     *
     * * ''id''  放置编辑器的容器id, 如果容器下的编辑器已经存在,就直接返回
     * * ''opt'' 编辑器的可选参数
     * @example
     *  UE.getEditor('containerId',{onready:function(){//创建一个编辑器实例
     *      this.setContent('hello')
     *  }});
     *  UE.getEditor('containerId'); //返回刚创建的实例
     *
     */
    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
            };
        })

    }

})();

在调用UE.getEditor(‘editor’)初始化UEditor时,先从放置编辑器的容器instances中获取,没有实例才实例化一个Editor,这就是引起问题的原因。

  • 在第一次跳转到编辑器界面时,正常的实例化了一个新的编辑器对象,并放入instances,调用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创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

Ext.onReady(function(){ 
    ue.ready(function () {
        //根据信息项权限组控制,判断简历是否可用
        if(fieldsDisabled.indexOf("a1701") != -1){
            ue.setDisabled();
            Ext.getCmp('qx').setDisabled(true);
            Ext.getCmp('qx2').setDisabled(true);
        }
        setContent();
        genResume();
    });
});

按照网上的方式添加如下代码:

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

或者修改如下

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

但是发现都无效,经过多次测试,发现点击上一人,下一人时,样式没有问题,而上一人下一人只调用了setContent()和genResume()。所以采用延迟内容加载来解决问题。代码如下:

//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
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 () {
        //根据信息项权限组控制,判断简历是否可用
        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); 
}); 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容