편집중에 단어를 선택한 후 영화 버튼을 눌러 영화를 검색한 후 정보를 첨부하는 툴 만들기 튜토리얼 4단계

• Template을 이용하여 메뉴를 그린다
• 이벤트를 주고 menu에 연결한다.
• tool에서 받아서 본문에 삽입한다.

markup

<ul class="tx-bar tx-bar-left"> 
<li class="tx-list">
	<div id="tx_cinema" class="tx-cinema tx-btn-lrbg" unselectable="on">
		<a title="영화" class="tx-icon" href="javascript:;">영화</a>
	</div>
	<div id="tx_cinema_menu" class="tx-cinema-menu tx-menu" unselectable="on">
		영화 메뉴입니다.
	</div>
</li>
</ul>

stylesheet

.tx-cinema a.tx-icon { background:url(http://daumopeneditor.googlecode.com/files/icon_movie.gif) no-repeat; }
.tx-cinema-menu { width: 200px; }

javascript

TrexConfig.addTool( "cinema", { wysiwygonly: true,  status:true} );

Trex.Tool.Cinema = Trex.Class.create({
	$const: {
		__Identity: 'cinema'
	},
	$extend: Trex.Tool,
	oninitialized: function(){
		var _canvas = this.canvas;
		var button = new Trex.Button(this.buttonCfg);
		var menu = new Trex.Menu.Cinema(this.menuCfg);
		var executeHandler = function(html){ 
			_canvas.pasteContent(html);
		}
		var initHandler = function(){
			processor = _canvas.getProcessor();
			return processor.getText();
		}
		;
		this.weave.bind(this)(
			button,
			menu,
			executeHandler,
			initHandler
		);
	}
});

Trex.Menu.Cinema = Trex.Class.create({
	$extend: Trex.Menu,
	$mixins:[
		Trex.I.JSRequester
	],
	ongenerated: function(){
		this.elMenu.innerHTML = "이것은 영화메뉴입니다!";
		var _menu = this;
		var _template = new Template('<div><img src="#{thumbnail}" align="left"/><h5><a href="#{link}" target="_blank">#{title}</a></h5><dl><dt>감독</dt><dd>#{director}</dd><dt>배우</dt><dd>#{actor}</dd></dl></div>');
		window.mymovielist = function(data) {
			var _html = [];
			for( var i = 0; i < data.channel.item.length; i++ ){
				var _item = data.channel.item[i];
				var _data = {
					seq:i+1,
					thumbnail: _item.thumbnail.pluck('content').join(","),
					link:_item.title.pluck('link').join(","),
					title: _item.title.pluck('content').join(","),
					director: _item.director.pluck('content').join(","),
					actor: _item.actor.pluck('content').join(",")
				}
				_html .push( _template.evaluate( _data ));
			}
			_menu.elMenu.innerHTML = _html.join("");
			
			var imgs = $tom.collectAll( _menu.elMenu, "img" );
			for( var i = 0; i < imgs.length;  i++ ){
				$tx.observe( imgs[i], "click", function(index){ 
					return function(ev){
						_menu.onSelect(ev, _html[index]);
					}
				}(i));
			}
		};
	},
	onregenerated: function(){
		var _initData = this.initHandler();
		this.elMenu.innerHTML =  _initData;
		var _url = "http://apis.daum.net/contents/movie?apikey=7864cadc5c3bb56230791db06921bd00ec03faaa&q="+encodeURIComponent(_initData)+"&output=json&result=4&pageno=1&callback=mymovielist";
		this.importScript( _url );
	}
});
// 7864cadc5c3bb56230791db06921bd00ec03faaa