이미지 업로드 후 이미지 클릭시 사이즈 조절 레이어가 안나오네요.

[airshivan]

이미지 업로드 후 이미지 클릭시 사이즈 조절 레이어가 안나오네요.
네이버 블로그에서는 이미지 클릭하면은 나오던데...
어떻게 해야될까요?

SE2.3.10.O11329

다운 받아서 사용중입니다.

[kyungilpark]

이미지 퀵에디터 플러그인은 첨부된 이미지파일정보와 연관이 있어서 오픈소스버전에서는 제외되었습니다.
별도로 구현하셔야 합니다.

[imredcat]

그렇다면 구현을 위한 이미지 클릭 이벤트 등은 어떻게 해야 하나요?

[kyungilpark]

에디터에서 발생하는 이벤트들은 플러그인에서 다음과 같이 메서드를 정의하면 받을 수 있습니다.

$ON_EVENT_EDITING_AREA_CLICK : function(we) {
  console.log(we); // we는 jindo에서 랩핑한 이벤트객체입니다.
}

플러그인 작성방법은 가이드문서 참고 바랍니다. (http://naver.github.io/smarteditor2/user_guide/ > 기능추가및변경하기 > 새로운 기능 추가)

사용할 수 있는 이벤트 목록은 예전에 네이버개발자센터 위키에 정리된게 있었는데 이관시기를 놓쳐서 백업을 못해 유실되었습니다. ㅠ.ㅠ 다시 작성해야하는데 시간이 안나서...
일단, 기본적인 이벤트들은 (hp_SE_EditingAreaManager.js)에 정의되어 있으니 참고 바랍니다.

attachDocumentEvents : function(doc){
	this.oApp.registerBrowserEvent(doc, "click", "EVENT_EDITING_AREA_CLICK");
	this.oApp.registerBrowserEvent(doc, "dblclick", "EVENT_EDITING_AREA_DBLCLICK");
	this.oApp.registerBrowserEvent(doc, "mousedown", "EVENT_EDITING_AREA_MOUSEDOWN");
	this.oApp.registerBrowserEvent(doc, "mousemove", "EVENT_EDITING_AREA_MOUSEMOVE");
	this.oApp.registerBrowserEvent(doc, "mouseup", "EVENT_EDITING_AREA_MOUSEUP");
	this.oApp.registerBrowserEvent(doc, "mouseout", "EVENT_EDITING_AREA_MOUSEOUT");
	this.oApp.registerBrowserEvent(doc, "mousewheel", "EVENT_EDITING_AREA_MOUSEWHEEL");
	this.oApp.registerBrowserEvent(doc, "keydown", "EVENT_EDITING_AREA_KEYDOWN");
	this.oApp.registerBrowserEvent(doc, "keypress", "EVENT_EDITING_AREA_KEYPRESS");
	this.oApp.registerBrowserEvent(doc, "keyup", "EVENT_EDITING_AREA_KEYUP");
	this.oApp.registerBrowserEvent(doc, "scroll", "EVENT_EDITING_AREA_SCROLL");
},

[kyungilpark]

음... 위에서 너무 간략한 설명만 드려서 구현하기 어려우실 수 있습니다.
네이버블로그에서 사용하는 이미지 퀵에디터 플러그인소스를 약간 수정하여 gist에 올려두었습니다.
https://gist.github.com/kyungilpark/a5901e43be5ef7222ef531a466678918
아래 스텝으로 적용하시면 아마 될 겁니다.

1. 해당 소스 다운받아서 SmartEditor2Skin.html에 포함하시고
2. 설정파일(SE2M_Configuration.js)에서 다음과 같이 설정 추가

nhn.husky.SE2M_Configuration.QuickEditor = {
    common : {
        bUseConfig : false
    },
    Image : {
        nImageMaxWidthSize : 9999,
        nImageMaxHeightSize : 9999
    }
};

3. 에디터 생성 스크립트(SE2BasicCreator.js)에서 해당 플러그인 추가

oEditor.registerPlugin(new nhn.husky.SE_QuickEditor_Image(elAppContainer));			// 이미지 퀵에디터

4. 메시지 설정파일(husky_SE2B_Lang_ko_KR.js)에서 메시지 문자열 추가

'SE_QuickEditor_Image.exceedMaxSize' : '이미지 크기를 에디터 가로폭(${nEditorWidth}px)보다 크게 조절하실 수 없습니다.',

[imredcat]

정말 감사 합니다. 꾸벅~
테스트 해보겠습니다.

[imredcat]

위의 내용대로 해보니 안되어서
혹시나 해서 hp_SE_EditingAreaManager.js 를 찾아 보니 이 파일 자체가 없군요. ㅠㅠ

[kyungilpark]

아... SE2.3.10까지는 머지된 파일만 제공되어 hp_SE_EditingAreaManager.js파일이 따로 없군요..
혹시 어떤 오류가 나면서 안되는 건지 알려주시면 확인해보겠습니다.

[airshivan]

SmartEditor2Skin.html 에 hp_SE_QuickEditor_Image.js 파일 추가한뒤,
SE2BasicCreator.js 와 SE2B_Configuration_General.js 에 위에 추가하라고 알려주신것 추가하니
정상적으로 작동 잘 되니 참고하세요 :)

imredcat 님이 질문을 이어서 해주시고 kyungilpark님의 친절한 답변 덕분에 전 해결되었습니다.
감사합니다

[imredcat]

아! 잘 작동 됩니다.
"hp_SE_QuickEditor_Image.js" 파일을 "SE2M_Configuration.js" 다음에 로드 해야 되는군요.
정말 정말 감사 합니다. 꾸벅!

[kyungilpark]

@airshivan 님, @imredcat 님
잘된다니 다행이네요.. 확인 감사합니다.
크게 이상이 없다면 추후 버전에 해당 플러그인 포함시키는 걸로 검토해보도록 하겠습니다.

[ujo2417]

혹시 크롬에서는 사용이 안되는건가요??

[kyungilpark]

@ujo2417
이미지 퀵에디터 샘플을 물어보시는거라면 크롬에서도 동작합니다.
#106 질문처럼 이미지 가장자리 꼭지점에 사각형 포인터가 생기는 것 을 물어보시는거라면 IE브라우저자체 기능으로 크롬에서는 별도 구현하셔야 합니다.