武汉web培训
达内武汉中心

15827352908

热门课程

武汉web培训:UEdit 使用总结

  • 时间:2016-05-17 10:52
  • 发布:永恒的避风港
  • 来源:ITeye

       最近项目中频繁使用到 uedit,在使用中遇到一些磕磕绊绊的事。记录一下
       1、渲染问题
       UEdit自带的渲染方法为editor.render(id),但这个方法只能调用一次。当页面中存在多个多个需要渲染的DOM节点时,这个方法就爱莫 能助了。在API里翻腾了许久后,尝试使用UE.getEditor(id)这个方法。该方法存在偶发性报错问题(并不严重的错误,而且未能确定是由该方 法引起的);代码如下:
多个dom进行渲染代码  收藏代码
for(var i = 0;i<plan_content.length;i++){  
    pc_only = $(plan_content[i]);  
    UEditArray[i] = UE.getEditor(pc_only.attr('id'));             
}  
    那个偶发性错误如果在以后的使用中找到处理方法,会及时更新。这个问题不会影响功能。
    2、内容问题
     在 使用中需要对uedit中的内容进行为空验证,经测试在UEdit中编辑的内容会在失焦时将值存入原textarea的val属性中。官网提供 有.getContent()方法来提供手动获取数据。我现在采用的方法是当鼠标移出UEdit区域后就调用该方法,毕竟嘛,你总不至于把提交按钮放到 UEdit上面吧。单片代码看起来可能有点晕,我粘个完整点的代码。
初始化uedit代码  收藏代码
/*  
        @UeditInit:初始化页面中的UEdit插件  
        并循环当前uedit容器,为其分类提供鼠标移出事件;  
    */  
    UEditInit: function(){  
        var plan_content = $('.plan_content');  
        try{  
            var editor = new UE.ui.Editor();                  
            if(plan_content && plan_content.length> 0){  
                var pc_only;  
                for(var i = 0;i<plan_content.length;i++){  
                    pc_only = $(plan_content[i]);  
                    pc_only.attr('pc_Index',i); //为鼠标移出事件,提供索引  
                    pc_only.parents('.form_element').addClass('UEditArea');  //为提供鼠标移出事件,提供元素标识  
                    UEditArray[i] = UE.getEditor(pc_only.attr('id'));  
                    //editor.render($(plan_content[i]).attr('id'));  使用UEdit官网上的部署编辑器方法替换render【渲染编辑器的DOM到指定容器】  
                      
                    }  
                /**  
                    为当前全部uedit容器提供鼠标移出事件;  
                    事件发生时,将uedit内容放至对应的textarea中  
                */  
                }             
                var UEditArea = $('.UEditArea');//获取当前所有使用uedit编辑器的父容器  ,所用class是在初始化ueidt时通过循环加上去的  
                UEditArea.mouseleave(function(){  
                    var _this = $(this);  
                    var tmp_textarea =  _this.find('textarea');  
                    var pc_Index = Number(tmp_textarea.attr('pc_Index'));  
                    tmp_textarea.val(UEditArray[pc_Index].getContent());  
                    });  
                      
            }catch(e){  
                console.log('%cUEditInit出现异常,异常为:'+e,'color:#f00');  
            }finally{  
                                      
                    }     
        },  
       其它的API上都有介绍,使用起来按API上面走就可以了。希望上面写的对各位有所帮助,有一同使用这个插件的有问题可以留言交流。

马上预约七天免费试听课

姓名:

电话:

上一篇:武汉web培训:前端优化小细节
下一篇:武汉web培训:简易tabs切换

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊