最近项目中频繁使用到 uedit,在使用中遇到一些磕磕绊绊的事。记录一下.
1 、渲染问题
UEdit自带的渲染方法为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()方法来提供手动获取数据。我现在采用的方法是当鼠标移出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上面走就可以了。希望上面写的对各位有所帮助,有一同使用这个插件的有问题可以留言交流。
@拭目以待
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love