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

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

作者: 云芈山人 | 来源:发表于2021-08-21 22:02 被阅读0次

问题:
人员信息打开,其中简历,首次打开样式加载,超出长度可下拉,但是关闭后再次打开发现样式不加载,无法下拉查看多余部分。
分析:
查看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); 
}); 

相关文章

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

    问题:人员信息打开,其中简历,首次打开样式加载,超出长度可下拉,但是关闭后再次打开发现样式不加载,无法下拉查看多余...

  • 离屏渲染

    屏幕上最终显示的数据有两种加载流程 正常渲染加载流程离屏渲染加载流程 从图上看,他们之间的区别就是离屏渲染比正常渲...

  • 四、离屏渲染

    离屏渲染与正常渲染 屏幕上最终显示的数据有两种加载流程 正常渲染加载流程 离屏渲染加载流程离屏渲染与正常渲染 常⻅...

  • 离屏渲染触发原理简述

    数据的加载渲染流程有两种:1、正常渲染加载2、离屏渲染加载图1 可得:离屏渲染比正常渲染多一个离屏缓存区 一、正常...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • iOS深入剖析【离屏渲染】原理

    离屏渲染与正常渲染 屏幕上最终显示的数据有两种加载流程 正常渲染加载流程 离屏渲染加载流程 从图上看,他们之间的区...

  • 支付宝小程序性能分析

    首屏算法说明 首屏即 页面首次渲染满屏内容,是用于计算T2的关键节点。简单说就是,在页面加载的过程中,记录所有的渲...

  • 前端注意和vue注意

    spa单页面应用 加载过程 FP :首次渲染绘制FCP :首次内容绘制FMP :首次有效绘制 === html*...

  • 8、运行机制

    一、启动1、冷启动 首次打开或被微信销毁后再次打开2、热启动 后台切前台 二、加载 wechat ...

网友评论

      本文标题:简历第二次不渲染(UEditor 首次加载正常,再次打开样式不渲

      本文链接:https://www.haomeiwen.com/subject/tmvtiltx.html