UEdit 使用总结

拭目以待 发布于

最近项目中频繁使用到 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上面走就可以了。希望上面写的对各位有所帮助,有一同使用这个插件的有问题可以留言交流。