daum editor panel 이벤트

/**
 * @fileoverview  
 * 사용자 정의 이벤트를 미리 정의
 */

(function(Trex) {
        /**
         *  @namespace
         *  @name Trex.Ev
         */
        Trex.Ev = /** @lends Trex.Ev */ {
                /** wysiwyg mode */
                __EDITOR_PANEL_MOUSEDOWN: 'editor.panel.mousedown',
                /**
                 * wysiwyg 영역에 발생하는 keydown 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_KEYDOWN, function(ev) {
                 *      });
                 */
                __CANVAS_PANEL_KEYDOWN: 'canvas.panel.keydown',
                /**
                 * wysiwyg 영역에 발생하는 keyup 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_KEYUP, function(ev) {
                 *      });
                 */
                __CANVAS_PANEL_KEYUP: 'canvas.panel.keyup',
                /**
                 * wysiwyg 영역에 발생하는 mousedown 이벤트<br/>
                 * Element Observer 보다 늦게 실행되며, mouseclick 보다 앞서 실행된다.
                 * 경우에 따라 상위 엘리먼트까지 탐색하여 실행하는 Element Observer를 사용한다.
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_MOUSEDOWN, function(ev) {
                 *              //execute function
                 *      });
                 *  canvas.observeElement({ tag: "img", klass: "txc-image" }, function(element) {
                 *              //execute function with element
                 *      });
                 */
                __CANVAS_PANEL_MOUSEDOWN: 'canvas.panel.mousedown',
                /**
                 * wysiwyg 영역에 발생하는 mouseup 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_MOUSEUP, function(ev) {
                 *      });
                 */
                __CANVAS_PANEL_MOUSEUP: 'canvas.panel.mouseup',
                /**
                 * wysiwyg 영역에 발생하는 mouseover 이벤트<br/>
                 * wysiwyg 영역에서 마우스를 움직일 때마다 발생하므로 과하게 사용하지 않도록 한다.
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_MOUSEOVER, function(ev) {
                 *      });
                 */
                __CANVAS_PANEL_MOUSEOVER: 'canvas.panel.mouseover',
                /**
                 * wysiwyg 영역에 발생하는 click 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_CLICK, function(ev) {
                 *      });
                 */
                __CANVAS_PANEL_CLICK: 'canvas.panel.click',
                /**
                 * wysiwyg 영역에서 발생하는 스크롤 변경 이벤트<br/>
                 * 이 이벤트는 wysiwyg 영역의 스크롤 높이가 변경되거나 위치가 변경될 경우 발생한다.
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_SCROLLING, function(ev) {
                 *      });
                 */
                __CANVAS_PANEL_SCROLLING: 'canvas.panel.scrolling',
                /**
                 * wysiwyg 영역이 로드되었을 경우 발생하는 사용자 정의 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__IFRAME_LOAD_COMPLETE, function(ev) {
                 *      });
                 */
                __IFRAME_LOAD_COMPLETE: 'iframe.load.complete',
                /**
                 * HTML모드(소스모드) 영역에서 발생하는 click 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_SOURCE_PANEL_CLICK, function(ev) {
                 *      });
                 */
                __CANVAS_SOURCE_PANEL_CLICK: 'canvas.source.panel.click',
                /**
                 * HTML모드(소스모드) 영역에서 발생하는 keydown 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_SOURCE_PANEL_KEYDOWN, function(ev) {
                 *      });
                 */
                __CANVAS_SOURCE_PANEL_KEYDOWN: 'canvas.source.panel.mousedown',
                /**
                 * HTML모드(소스모드) 영역에서 발생하는 mousedown 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_SOURCE_PANEL_MOUSEDOWN, function(ev) {
                 *      });
                 */
                __CANVAS_SOURCE_PANEL_MOUSEDOWN: 'canvas.source.panel.mousedown',
                /**
                 * 텍스트모드 영역에서 발생하는 click 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_TEXT_PANEL_CLICK, function(ev) {
                 *      });
                 */
                __CANVAS_TEXT_PANEL_CLICK: 'canvas.text.panel.click',
                /**
                 * 모드가 변경될 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_MODE_CHANGE, function(from, to) {
                 *              //from - 변경되기 전 모드
                 *              //to - 변경되고난 후 모드
                 *      });
                 */
                __CANVAS_MODE_CHANGE: 'canvas.mode.change',
                /**
                 * 툴바의 버튼이 눌렸을 경우 발생하는 사용자 정의 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__TOOL_CLICK, function(identity) {
                 *              //identity - tool의 Identity(bold, aligncenter...)
                 *      });
                 */
                __TOOL_CLICK: 'toolbar.button.click',
                /**
                 * Editor.save()가 호출되었을 경우 발생하는 사용자 정의 이벤트<br/>
                 * 실제 form이 submit이 되기 전에 발생한다.
                 * @example
                 *      canvas.observeJob(Trex.Ev.__ON_SUBMIT, function(editor) {
                 *              //editor - editor 객체
                 *      });
                 */
                __ON_SUBMIT: "editor.submit",
                /**
                 * 에디터의 높이가 변경된 후 발생하는 사용자 정의 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_HEIGHT_CHANGE, function(height) {
                 *              //height - 변경된 높이
                 *      });
                 */
                __CANVAS_HEIGHT_CHANGE: 'canvas.height.change',
                /**
                 * wysiwyg 영역에서 키이벤트나 마우스이벤트가 발생할 경우 발생하는 사용자 정의 이벤트<br/>
                 * 주로 툴바 버튼의 상태를 표시할 때에 사용한다.
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_QUERY_STATUS, function() {
                 *      });
                 */
                __CANVAS_PANEL_QUERY_STATUS: 'canvas.panel.style.change',
                /**
                 * wysiwyg 영역에서 delete 키가 눌렸을 경우 발생하는 사용자 정의 이벤트<br/>
                 * 주로 컨텐츠와 동기화를 맞추기 위해 사용한다.
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_PANEL_DELETE_SOMETHING, function() {
                 *      });
                 */
                __CANVAS_PANEL_DELETE_SOMETHING: 'canvas.panel.delkey.press',
                /**
                 * Entry Box에 Entry가 추가되었을 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      attachbox.observeJob(Trex.Ev.__ENTRYBOX_ENTRY_ADDED, function(entry) {
                 *              //생성된 entry 객체를 인자로 받는다.
                 *      });
                 */
                __ENTRYBOX_ENTRY_ADDED: 'entrybox.entryadded',
                /**
                 * Entry Box의 Entry가 수정되었을 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      attachbox.observeJob(Trex.Ev.__ENTRYBOX_ENTRY_MODIFIED, function(entry) {
                 *              //수정된 entry 객체를 인자로 받는다.
                 *      });
                 */
                __ENTRYBOX_ENTRY_MODIFIED: 'entrybox.entrymodified',
                /**
                 * Entry Box에서 Entry가 제거되었을 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      attachbox.observeJob(Trex.Ev.__ENTRYBOX_ENTRY_REMOVED, function(entry) {
                 *              //삭제될 entry 객체를 인자로 받는다.
                 *      });
                 */
                __ENTRYBOX_ENTRY_REMOVED: 'entrybox.entryremoved',
                /**
                 * Entry Box에서 모든 Entry가 제거되었을 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      attachbox.observeJob(Trex.Ev.__ENTRYBOX_ALL_ENTRY_REMOVED, function() {
                 *      });
                 */
                __ENTRYBOX_ALL_ENTRY_REMOVED: 'entrybox.removed.all.perfectly',
                /**
                 * Attach Box가 보여질 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      attachbox.observeJob(Trex.Ev.__ATTACHBOX_SHOW, function() {
                 *      });
                 */
                __ATTACHBOX_SHOW: 'attachbox.show',
                /**
                 * Attach Box가 감춰질 때 발생하는 사용자 정의 이벤트
                 * @example
                 *      attachbox.observeJob(Trex.Ev.__ATTACHBOX_HIDE, function() {
                 *      });
                 */
                __ATTACHBOX_HIDE: 'attachbox.hide',
                /**
                 * 에디터 페이지를 벗어나기 전에 발생하는 사용자 정의 이벤트
                 * @example
                 *      canvas.observeJob(Trex.Ev.__CANVAS_BEFORE_UNLOAD, function() {
                 *      });
                 */
                __CANVAS_BEFORE_UNLOAD: 'canvas.unload',
                /**
                 * 각 첨부가 추가될 때 발생하는 사용자 정의 이벤트<br/>
                 * entry가 생성되고 본문에 삽입이 완료되고 호출된다.
                 * 실제로는 entry 부분이 첨부의 Identity(image, movie, media...)로 대체된다.
                 * @abstract
                 * @example
                 *      canvas.observeJob('canvas.movie.added', function(entry) {
                 *              //생성된 entry 객체를 인자로 받는다.
                 *      });
                 */
                __CANVAS_ENTRY_ADDED: 'canvas.entry.added',
                /**
                 * 툴을 이용해 wysiwyg에 요소가 삽입이 될 때 발생하는 사용자 정의 이벤트
                 * @abstract
                 * @example
                 *      toolbar.observeJob('cmd.textbox.added', function(node) {
                 *              //필요에 따라 만들어진 요소 엘리먼트
                 *      });
                 */
                __COMMAND_NODE_ADDED: 'cmd.entry.added',
                /**
                 * 왼쪽 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_LEFT: 'align.left',
                /**
                 * 가운데 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_CENTER: 'align.center',
                /**
                 * 오른쪽 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_RIGHT: 'align.right',
                /**
                 * 양쪽 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_FULL: 'align.full',
                /**
                 * 이미지 왼쪽 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_IMG_LEFT: 'align.img.left',
                /**
                 * 이미지 가운데 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_IMG_CENTER: 'align.img.center',
                /**
                 * 이미지 왼쪽흐름 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_IMG_FLOAT_LEFT: 'align.img.floatleft',
                /**
                 * 이미지 오른쪽흐름 정렬을 실행하고서 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CMD_ALIGN_IMG_FLOAT_RIGHT: 'align.img.floatright',
                /**
                 * 에디터 로딩할 때 현재 모드와 config의 모드가 다를 때 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CANVAS_MODE_INITIALIZE: 'canvas.mode.initialize',
                /**
                 * 에디터 로딩할 때 컨텐츠를 초기화한 후 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __CANVAS_DATA_INITIALIZE: 'canvas.load.data',
                /**
                 * Attach Box의 ENTRY의 상태가 변경될 때 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __ENTRYBOX_ENTRY_REFRESH: 'entrybox.entryrefresh',
                /**
                 * 정보첨부가 삽입될 때 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __PASTE_SEARCHRESULT: 'trex.paste.info',
                /**
                 * 에디터에서 런타임에러가 났을 때 발생하는 사용자 정의 이벤트
                 * @private
                 */
                __RUNTIME_EXCEPTION: "editor.runtime.exception",
                /**
                 * 에디터 장애 로그를 남길 때 발생하는 사용자 정의 이벤트<br/>
                 * 로그를 전송한 후 실행 된다.
                 * @private
                 */
                __REPORT_TO_MAGPIE: "editor.report.magpie"
        };
})(Trex);

/** @namespace */
var TrexEvent = {
        /**
         * fires observer for target element
         * @param {Object} el
         * @param {Object} handles
         */
        fire: function(el, handles){
                if (el && el.tagName) {
                        var fn = handles[el.tagName.toLowerCase()];
                        if (fn) {
                                fn(el, handles);
                        }else {
                                TrexEvent.propagateToParent(el, handles);
                        }
                }else {
                        console.log("Not Supported Type : " + el);
                }
        },
        propagateToParent : function(element, handles){
                var _el = element.parentNode;
                if(_el && _el.tagName){
                        var fn = handles[_el.tagName.toLowerCase()];
                        if(fn){
                                fn(_el, handles);
                        }else{
                                TrexEvent.propagateToParent(_el, handles);
                        }
                }
        },
        stopPropagation : function(element){ }
};

출처 : https://code.google.com/p/daumopeneditor/source/browse/trunk/daumeditor/js/trex/event.js?r=210

JQuery 로 input[type=file] 초기화하기

HTML 부분

1
<input type="file" id="filename">

javascript 부분

1
2
3
4
5
6
7
if ($.browser.msie) {
    // ie 일때 input[type=file] init.
    $("#filename").replaceWith( $("#filename").clone(true) );
} else {
    // other browser 일때 input[type=file] init.
    $("#filename").val("");
}



출처 : http://domoyosi.tistory.com/23

JavaScript 디버거 “JSDT”

JSDT란?
JSDT (JavaScript Debug Toolkit)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다.  JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.

JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
 

링크의 JSDT (JavaScript Development Toolkit)와는 다른 디버깅을 위한 툴입니다.


JSDT의 구조
실제로 JSDT를 실행해보기 전에 JSDT의 동작원리에 대해서 살펴보겠습니다.

JSDT는 HTTP 프록시 서버를 내장하고 있어, 디버깅 웹 브라우저는 HTML및 JavaScript와 같은 리소스를 프록시를 통해 참조하게 됩니다.  이 경우 HTML 및 JavaScript가 프록시에 따라서 JSDT에 디버깅하는데 필요한 JavaScript가 자동으로 포함되게 됩니다. 포함된 JavaScript 코드는 XHR를 통해 디버거 쪽으로 필요한 정보를 전달합니다.
 

이러한 구조가 브라우저 쪽에 특별한 기능을 설치할 필요 없이 다양한 웹 브라우저에서 디버깅을 가능하게 합니다.


JSDT를 사용
JSDT 프로젝트 페이지에서 Swing 스탠드 애플리케이션 및 Eclipse 플러그인을 제공하고 있습니다.
우선 간단하게 사용할 수 있는 Swing 버전을 다운로드하여 사용해 봅니다.  윈도우의 경우 setup.exe 파일을 다운로드 받아 설치하면 다음과 같은 창이 나타납니다.

 

디버깅할 HTML 파일과 웹 브라우저의 실행 파일을 선택하고 시작 버튼을 클릭하고 디버깅을 시작할 수 있습니다.

사용은 일반적인 디버거와 비슷합니다.  디버깅을 시작하면 JSDT의 소스 코드 편집기에 소스코드가 표시되기 때문에, 정지하고자 하는 위치에 중단점(Breakpoint)을 찍고 단계별 스텝 오버, 스텝 아웃을 할 수 있습니다.  변수의 값은 variables 탭에서 확인할 수 있으며, expression 탭에서 임의의 표현식을 등록하고 평가 결과를 볼 수 있습니다.
  
Eclipse 플러그인 버전도 기본적인 사용법은 동일합니다.  다운로드 페이지에서 jsdt – 2.1.0.zip 을 다운로드 하고 적당한 위치에 압축을 푼 후, 업데이트 관리자에서 플러그인을 설치할 수 있습니다.  Eclipse 플러그인 버전에서는 디버거로서의 기능뿐만 아니라, 구문 검사 기능 등을 갖춘 유용한 JavaScript 편집기도 제공되며, JavaScript 편집기에서 임의의 행을 클릭하여 중단점을 설정할 수 있습니다.

Eclipse에서 JavaScript Debugging 모습

JavaScript Debug Configuration 설정 모습



Eclipse 의 웹 작업 영역에서 HTML 파일을 선택하고 마우스 오른쪽 클릭 -> “debug” -> “JavaScript Debug Tool”으로 디버깅을 시작할 수 있습니다.


정리
JSDT는 HTTP 프록시가 디버깅 코드를 삽입하는 방법을 이용하여 브라우저 측에 특수 기능 등을 필요로 하지 않고 사용자 웹 브라우저에서 JavaScript 디버깅을 가능하게 하고 있습니다.  또한 독립 실행형 버전과 Eclipse 플러그인 버전을 제공하고 있으며, 개발 스타일에 맞춰 선택할 수 있습니다.

그러나 아직까지는 몇몇 문제점들이 남아있습니다.  실제로 개발에 적용해보는 것은 어려울 지도 모르겠습니다.  하지만 그런 문제점들을 떠나서 JSDT의 구조를 보면 알겠지만 매우 획기적인 디버거라 할 수 있다는 것입니다.  


이클립스 JSDT 플러그인 사용으로 자바스크립트(jQuery) 쉽게 사용하기

 

JSDT 는 자동완성 기능을 지원하기 때문에 자바스크립트 소스 개발에

아주 유용하다. 굳이 API 를 따로 찾아보지 않아도 되기 때문이다.

엄밀히 말하면 jQuery 사용을 편안하게 하기 위한 플러그인이다.

요즘은 자바스크립트 개발에 대부분 jQuery 를 사용하기 때문에 따로

구분해서 이야기 하지 않았다.

 

1. 설치

 

설치를 위해서 Marketplace 로 간다.

그리고 JSDT 를 검색해서 다운받는다.

 

2. include path 에 JSDT 추가

 

프로젝트를 선택하고 Properties 를 연다.

javascript > Include Path 를 클릭하게 되면 오른쪽에 등록된 라이브러리

리스트가 보일것이다. 여기에 추가하면 된다.

Add Javascript Library 버튼을 클릭해서 jQuery Library 선택하고 라이브러리

버전을 선택한후 종료한다.

아래 추가된 모습을 볼수 있다.

 

3. 테스트 페이지에서 확인

 

html 페이지를 만들어서 jQuery 자동완성 기능이 동작하는지 확인하자.

점을 찍고 ctrl + enter 를 누르게 되면 아래 그림과 같이 관련된 함수들이

나타나게 된다.

 

 

출처 : http://mainia.tistory.com/691


juery tmpl else 처리

http://stackoverflow.com/questions/4989589/jquery-template-else-if-construct