最近項(xiàng)目中頻繁使用到 uedit缤至,在使用中遇到一些磕磕絆絆的事。記錄一下.
1 康谆、渲染問題
UEdit自帶的渲染方法為editor.render(id)领斥,但這個(gè)方法只能調(diào)用一次。當(dāng)頁面中存在多個(gè)多個(gè)需要渲染的DOM節(jié)點(diǎn)時(shí)沃暗,這個(gè)方法就愛莫 能助了月洛。在API里翻騰了許久后,嘗試使用UE.getEditor(id)這個(gè)方法孽锥。該方法存在偶發(fā)性報(bào)錯(cuò)問題(并不嚴(yán)重的錯(cuò)誤嚼黔,而且未能確定是由該方 法引起的),代碼如下:
for(var i = 0;i<plan_content.length;i++){
pc_only = $(plan_content[i]);
UEditArray[i] = UE.getEditor(pc_only.attr('id'));
}
那個(gè)偶發(fā)性錯(cuò)誤如果在以后的使用中找到處理方法细层,會(huì)及時(shí)更新。這個(gè)問題不會(huì)影響功能唬涧。
2疫赎、 內(nèi)容問題
在 使用中需要對(duì)uedit中的內(nèi)容進(jìn)行為空驗(yàn)證,經(jīng)測(cè)試在UEdit中編輯的內(nèi)容會(huì)在失焦時(shí)將值存入原textarea的val屬性中碎节。官網(wǎng)提供 有.getContent()方法來提供手動(dòng)獲取數(shù)據(jù)捧搞。我現(xiàn)在采用的方法是當(dāng)鼠標(biāo)移出UEdit區(qū)域后就調(diào)用該方法,畢竟嘛狮荔,你總不至于把提交按鈕放到 UEdit上面吧胎撇。單片代碼看起來可能有點(diǎn)暈,我粘個(gè)完整點(diǎn)的代碼殖氏。
/*
@UeditInit:初始化頁面中的UEdit插件
并循環(huán)當(dāng)前uedit容器晚树,為其分類提供鼠標(biāo)移出事件;
*/
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); //為鼠標(biāo)移出事件受葛,提供索引
pc_only.parents('.form_element').addClass('UEditArea'); //為提供鼠標(biāo)移出事件题涨,提供元素標(biāo)識(shí)
UEditArray[i] = UE.getEditor(pc_only.attr('id'));
//editor.render($(plan_content[i]).attr('id')); 使用UEdit官網(wǎng)上的部署編輯器方法替換render【渲染編輯器的DOM到指定容器】
}
/**
為當(dāng)前全部uedit容器提供鼠標(biāo)移出事件;
事件發(fā)生時(shí)总滩,將uedit內(nèi)容放至對(duì)應(yīng)的textarea中
*/
}
var UEditArea = $('.UEditArea');//獲取當(dāng)前所有使用uedit編輯器的父容器 纲堵,所用class是在初始化ueidt時(shí)通過循環(huán)加上去的
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出現(xiàn)異常,異常為:'+e,'color:#f00');
}finally{
}
}
其它的API上都有介紹闰渔,使用起來按API上面走就可以了席函。希望上面寫的對(duì)各位有所幫助,有一同使用這個(gè)插件的有問題可以留言交流冈涧。
@拭目以待
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love