使用 MOLECULE 迅速包装百度 UEditor

UEditor:

UEditor - 首页
http://ueditor.baidu.com/website/

我们在对话框上放了几个 UEditor,发现第一次弹出对话框时UEditor还没有初始化 setContent 不能成功,于是加了一个 setTimeout 反复重试,后来发现关闭对话框后再打开还是不能正确的设置上去,原因是元素没有显示,遂有如下代码:

	(function setTitle(){
		var edt = UE.getEditor("title");
		if(edt == null || $(edt.body).is(':visible') == false){  // 不断重试到初始化并且可见
			setTimeout(setTitle, 10);
			return;
		}
		edt.ready(function(){   // 当 ready 时才能真正 setContent
			this.setContent(tr.data("title"));
			this.removeListener('ready', arguments.callee)
		});
	})();

之后,撸起袖子将其封装为一个 MOLECULE:

<div molecule-def="UEditor">
	<script>
			// MOLECULE_DEF
			function UEditor(){
				// 创建UIEditor......

				var me = this;
				function updateContent(){   // 基本照抄上面的 updateTitle
					var edt = UE.getEditor(me.el);
					if(edt == null || $(edt.body).is(':visible') == false){
						setTimeout(updateContent, 10);
						return;
					}
					edt.ready(function(){
						this.setContent(me.value);
						this.removeListener('ready', arguments.callee)
					});
				}
				
				this.setValue = function(v){
					this.value = v;
					updateContent();
				}
				this.getValue = function(){
					var edt = UE.getEditor(this.el);
return edt ? edt.getContent() : this.value; } } // MOLECULE_DEF_END Molecule.create(UEditor) </script> </div>

该MOLECULE将值存放在 this.value 中,并包装了延迟设置逻辑,可以确保总能将值设置成功。

molecule 的两个函数命名为 getValue setValue,可以适配 d2js 前端渲染器 molecule 和收集器 m。

这个例子充分展示了 molecule 研发周期短,学习难度小的特点,从实现功能的 js 到 molecule 中的脚本块跳跃轻松,基本抄过去就形成了组件。

 

posted @ 2017-03-08 13:19  Inshua  阅读(200)  评论(0编辑  收藏  举报