[JS] 스마트 에디터에 keyup 이벤트 등록

// 일반적인 방법으로는 사용할 수 없고 가이드문서를 참고해서 플러그인을 추가 제작해야 한다.

// 가이드 문서 사이트의 [기능 추가 및 변경하기] - [새로운 기능추가] 를 참고하여 제작할 수 있다.

 

내가 추가 작성한 smarteditor2 keyup 코드

 

// smarteditor2/SmartEditor2Skin_ko_KR.html

 

<script type="text/javascript" src="./js/service/hp_keyup.js" charset="utf-8"></script>

 

// smarteditor2/service/hp_keyup.js

 

nhn.husky.keyup = jindo.$Class({
    name: 'SE2_keyup',

    $init : function(elAppContainer){
        // 플러그인을 생성하면서 동시에 초기화를 수행하려면 $init 함수에서 초기화를 수행한다.
        this._assignHTMLObjects(elAppContainer);
    },
    _assignHTMLObjects : function(elAppContainer){
        this.oDropdownLayer =
            cssquery.getSingle("DIV.husky_seditor_TimeStamper_layer", elAppContainer);
    },
    $ON_MSG_APP_READY : function() {
        this.oApp.exec('REGISTER_UI_EVENT', ['TimeStamper', 'click', 'SE_TOGGLE_TIMESTAMPER_LAYER']);
    },
    $ON_EVENT_EDITING_AREA_KEYUP : function(we) {
        // keyup event
        console.log('SE_KEYUP');
        const target_keyup = we.element.innerHTML;
    }
});

 

// smarteditor2/service/SE2BasicCreator.js

 

oEditor.registerPlugin(new nhn.husky.keyup(elAppContainer));

 

---

// 아래는 코드 작성 시 참고했던 내용이다.

 

SmartEditor2Skin.htm 파일에 JavaScript 파일 경로 추가

먼저, 추가할 이벤트들이 들어있는 js 파일을 생성하고,

SmartEditor2Skin.html 파일을 열어서 추가할 플러그인 파일 경로를 추가한다.

파일을 추가할 위치를 결정하기 어렵다면, smarteditor2.js를 선언하는 줄 아래에 추가하는 것을 권장한다.

<script type="text/javascript" src="js/hp_SE_TimeStamper.js" charset="utf-8"> </script>

 

SE2BasicCreator.js 파일에 플러그인 등록

/js/SE2BasicCreator.js 파일을 열어서 플러그인을 등록한다.

제일 아래에 추가하는 것을 권장한다.

nhn.husky 뒤에 나오는 함수명은 별도로 생성한 이벤트 js 파일에 작성된 함수명이어야한다.

자동완성을 이용하여 작성하는 것을 추천 한다.

oEditor.registerPlugin(new nhn.husky.SE_TimeStamper(elAppContainer));

 

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를 액티브 레이어 그룹에 추가하고

툴바 아래에 레이어를 생성한다.

 

이제 Insert Date 버튼을 누르면 본문에 시간이 삽입되는 함수를 작성한다.

함수의 이름은 $ON_PASTE_NOW_DATE라고 하자. 이 함수를 작성하는 방법은 다음과 같다.

 

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

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

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

3. PASTE_NOW_DATE 핸들러를 작성한다. 이 핸들러 안에서는 에디터에서 제공하는 PASTE_HTML이라는 핸들러를 호출한다. PASTE_HTML은 본문에 콘텐츠를 넣을 때 사용되는 핸들러이다. 두 번째 매개변수로 본문에 삽입할 내용을 입력한다.

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

 

SE_TimeStamper 플러그인 전체 코드

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()]);
    }
});

 

출처 : http://naver.github.io/smarteditor2/user_guide/3_customizing/plugins/02.html

플러그인 등록 · GitBook