最近项目中频繁使用到 uedit,在使用中遇到一些磕磕绊绊的事。记录一下
1、渲染问题
ueidt自带的渲染方法为editor.render(id),但这个方法只能调用一次。当页面中存在多个多个需要渲染的DOM节点时,这个方法就爱莫 能助了。在API里翻腾了许久后,尝试使用UE.getEditor(id)这个方法。该方法存在偶发性报错问题(并不严重的错误,而且未能确定是由该方 法引起的);代码如下:
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()方法来提供手动获取数据。我现在采用的方法是当鼠标移出uedi区域后就调用该方法,毕竟嘛,你总不至于把提交按钮放到 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上面走就可以了。希望上面写的对各位有所帮助,有一同使用这个插件的有问题可以留言交流。