플러그인 제작

플러그인을 제작하려면 핸들러를 추가해야 한다. 여기에서는 Husky 프레임워크 기본 핸들러와 사용자 핸들러를 추가하는 방법을 설명한다.

Husky 프레임워크 기본 핸들러 추가

"파일과 클래스 명명 규칙"에서 설명한 규칙에 따라 플러그인 파일을 생성하고 다음과 같이 기본 핸들러를 추가한다.

$init
플러그인을 생성하면서 동시에 초기화를 수행하려면 $init 함수에서 초기화를 수행한다.
```
$init : function(elAppContainer){
this._assignHTMLObjects(elAppContainer);
},
```
_assignHTMLElements
지속적으로 사용할 HTML 요소는 _assignHTMLElements 함수에서 초기화한다. 단, 성능에 많은 영향을 준다면 필요한 시점에 HTML 요소를 초기화하여 사용하는 것이 좋다.
다음은 툴바에 추가한 버튼을 클릭하면 보여줄 div 레이어를 초기화하는 코드이다.
```
_assignHTMLObjects : function(elAppContainer){
this.oDropdownLayer =
        cssquery.getSingle("DIV.husky_seditor_TimeStamper_layer", elAppContainer);
},
```
$ONMSG_APP_READY
모든 플러그인이 등록된 이후에 초기화를 수행해야 하는 경우에는 $ON MSGAPP_READY에서 처리한다. 이 메시지는 에디터 초기화에 영향을 주므로 HTML 요소를 초기화하는 작업과 HTML 요소에 이벤트를 연결하는 작업만 수행한다.
다음은 버튼에 이벤트를 연결하는 코드이다. 이때 REGISTER_UI_EVENT에 전달되는 3개의 매개변수는 각각 '추가한 버튼의 클래스 이름에서 `husky_seditor_ui`를 제외한 부분', '발생할 이벤트', '이벤트가 발생하면 호출될 핸들러'를 의미한다.
```
$ON_MSG_APP_READY : function() {
this.oApp.exec('REGISTER_UI_EVENT', ['TimeStamper', 'click',
        'SE_TOGGLE_TIMESTAMPER_LAYER']);
},
```

사용자 핸들러 추가

Husky 플러그인에서 제공하는 핸들러 외에 사용자 핸들러도 생성해야 한다. 핸들러 이름 앞에는 $ON_을 붙여야 하며, 핸들러 이름 작성 시 권장 사항은 다음과 같다.

대문자로 작성한다.
그대로 전달되는 브라우저 이벤트에 대한 핸들러의 이름은 다음과 같이 EVENT_로 시작한다.
```
$ON_EVENT_EDITING_AREA_KEYUP
```
반드시 특정 작업을 수행해야 하는 것이 아니라 특정 이벤트가 발생했음을 통지받는 핸들러의 이름은 다음과 같이 MSG_로 시작한다.
```
$ON_MSG_EDITOR_READY
```

앞에서 TimeStamper 플러그인 예제에 툴바 버튼에 클릭 이벤트를 추가하고, 버튼을 클릭하면 호출될 핸들러를 선언했다. 여기에서는 호출될 핸들러인 SE_TOGGLE_TIMESTAMPER_LAYER를 작성한다. 함수 안에는 버튼을 클릭하면 수행할 동작을 작성한다.

$ON_SE_TOGGLE_TIMESTAMPER_LAYER : function(){
    this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oDropdownLayer]);
}

SE_TOGGLE_TIMESTAMPER_LAYER 핸들러 함수 안에서 호출하는 TOGGLE_TOOLBAR_ACTIVE_LAYER 핸들러는 에디터에서 제공하는 핸들러로, 두 번째 매개변수인 this.oDropdownLayer를 액티브 레이어 그룹에 추가하고 툴바 아래에 다음과 같은 레이어를 생성한다.

그림 40 액티브 레이어를 추가한 에디터 화면

이제 Insert Date 버튼을 누르면 본문에 시간이 삽입되는 함수를 작성한다. 함수의 이름은 $ON_PASTE_NOW_DATE라고 하자. 이 함수를 작성하는 방법은 다음과 같다.

레이어 안의 버튼을 _assignHTMLObjects에서 초기화한다.

$ON_MSG_APP_READY에서 초기화한 버튼에 이벤트를 할당한다.

this.oApp.registerBrowserEvent(this.oInputButton, 'click','PASTE_NOW_DATE');

PASTE_NOW_DATE 핸들러를 작성한다. 이 핸들러 안에서는 에디터에서 제공하는 PASTE_HTML이라는 핸들러를 호출한다. PASTE_HTML은 본문에 콘텐츠를 넣을 때 사용되는 핸들러이다. 두 번째 매개변수로 본문에 삽입할 내용을 입력한다.
```
$ON_PASTE_NOW_DATE : function(){
 this.oApp.exec("PASTE_HTML", [new Date()]);
}
```

다음은 플러그인을 생성을 완료하고, 버튼을 클릭하여 본문에 현재 시각을 넣은 화면이다.

그림 41 TimeStamper 실행한 에디터 화면

SE_TimeStamper 플러그인 전체 코드

지금까지 툴바에 새로은 기능을 추가하는 방법을 간단하게 알아보았다. hp_SE_TimeStamper.js의 전체 코드는 다음과 같다.

nhn.husky.SE_TimeStamper = jindo.$Class({
    name : "SE_TimeStamper",
    $init : function(elAppContainer){
        this._assignHTMLObjects(elAppContainer);
    },

    _assignHTMLObjects : function(elAppContainer){
        this.oDropdownLayer =
                cssquery.getSingle("DIV.husky_seditor_TimeStamper_layer", elAppContainer);
        //div 레이어안에 있는 input button을 cssquery로 찾는 부분.
        this.oInputButton = cssquery.getSingle(".se_button_time", elAppContainer);
    },

    $ON_MSG_APP_READY : function(){
        this.oApp.exec("REGISTER_UI_EVENT",
                ["TimeStamper", "click", "SE_TOGGLE_TIMESTAMPER_LAYER"]);
        //input button에 click 이벤트를 할당.
        this.oApp.registerBrowserEvent(this.oInputButton, 'click','PASTE_NOW_DATE');
    },

    $ON_SE_TOGGLE_TIMESTAMPER_LAYER : function(){
        this.oApp.exec("TOGGLE_TOOLBAR_ACTIVE_LAYER", [this.oDropdownLayer]);
    },

    $ON_PASTE_NOW_DATE : function(){
        this.oApp.exec("PASTE_HTML", [new Date()]);
    }
});

플러그인 제작