美文网首页
简历第二次不渲染(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 首次加载正常,再次打开样式不渲

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