스마트 에디터 이벤트 생성, 키이벤트 :: 개발/일상_Mr.lee

스마트 에디터 이벤트 생성, 키이벤트

Posted by Mr.mandu.
2016. 9. 5. 18:48 개발/javascript,jquery

안녕하세요.

이번에 프로젝트를 진행하면서

스마트 에디터를 사용하면서 이벤트를 새롭게 정의할 일이 생겼습니다.

스마트 에디터는 네이버 에디터를 사용 하였습니다.


한참을 구글링하다....어찌어찌 구현하였기에 정리해두려고 합니다.


우선 저의 소스 경로 입니다.

webapp/wcom/se2   에 스마트 에디터가 있습니다.


그럼 이제 키 이벤트를 구현해보겠습니다.


1. 플러그인 등록

webapp/wcom/se2/SE2BasicCreator.js


SE2BasicCreator.js 파일에 들어가 보겠습니다.


마지막줄에 다음과 같은 코드가 있습니다.


oEditor.registerPlugin(new nhn.husky.SE2B_CSSLoader()); // CSS lazy load

oEditor.registerPlugin(new nhn.husky.SE_OuterIFrameControl(elAppContainer, 100));

oEditor.registerPlugin(new nhn.husky.SE_ToolbarToggler(elAppContainer, htParams.bUseToolbar));

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


여기 밑에 제가 만들 플러그인을 등록 하겠습니다.

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



2. 함수 구현

저도 완벽하게 분석하여 구현한것은 아니라....

쓰는방법만 알고 있습니다.


아까 등록했던 nhn.husky.LeeEvent 를 구현해보면

name을 적고

init으로 초기 생성자(?)개념으로 구현을하고


$ON_MSG_APP_READY : function(){

this.oApp.exec("REGISTER_HOTKEY", ["ctrl+v", "LeeEventFunction", []]);

},

를통해 조합키가 동작할 수 있도록 함수를 등록합니다.

그리고


$ON_LeeEventFunction : function(){

alert(123);

}

함수에서 구현할 내용을 적습니다.


저는 이번 함수를 구현하면서

webapp/wcom/se2/smarteditor2.js 에 구현되어있는 함수들을 참고하였습니다.


조금이나마 도움이 되셧으면 합니다.



nhn.husky.LeeEvent = jindo.$Class({
    name : "LeeEvent",
    $init : function(elAppContainer){
		this._assignHTMLElements(elAppContainer);
	},
	
	_assignHTMLElements : function(elAppContainer){
		elAppContainer = jindo.$(elAppContainer) || document;
		

	},
    
	$ON_MSG_APP_READY : function(){
		this.oApp.exec("REGISTER_HOTKEY", ["ctrl+v", "LeeEventFunction", []]);
	},
	
	$ON_LeeEventFunction : function(){
		alert(123);
	}
  });