angularjs를 쓰고있는데 네이버 스마트 에디터 2.0 가 필요할 때

기본적인 적용방법은 다음과 같다. 플러그인 적용방법은 아래 두 사이트에서 참조

SmartEditor Basic 2.0을 소개하고, 설치 방법과 기능 추가 및 변경 방법을 설명

   : 설치하기 > 2.0 버전 설치 메뉴 참조

http://naver.github.io/smarteditor2/user_guide/

[JSP] 네이버의 스마트에디터(SmartEditor) 적용하기

http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220249101012

에디터를 적용하려면 jQuery를 써야하기 때문에 angularjs 와 직접적으로 연결을 시키지 못한다.

HTML 부분

<textarea class="form-control" name="se2" id="se2" rows=10 ng-model="input.content"></textarea>

(...)

<button class="btn btn-primary" type="button" id="okBefore" >확인</button>

<button class="btn btn-primary" type="button" id="ok" ng-click="ok()" style="display:none;">확인(hide)</button>

스크립트부분

$(document).ready(function(){

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "se2",

    sSkinURI: "/assets/global/plugins/smarteditor2/SmartEditor2Skin.html",

    htParams : {

            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseToolbar : true,             

            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseVerticalResizer : false,     

            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

            bUseModeChanger : true,         

            fOnBeforeUnload : function(){

                 

            }

        }, 

    fCreator: "createSEditor2"

});

  // 저장버튼을 눌렀을때. (아래내용 반드시 참고)

$("#okBefore").click(function(){

oEditors.getById["se2"].exec("UPDATE_CONTENTS_FIELD", []);

$("#ok").trigger("click");

});

})

기본적인 개요 설명 (이부분이 가장 중요)

/*

# 에디터 적용 및 전송까지 처리.

[신규등록]

1) textarea 태그에 id, name 지정

2) 아래의 스크립트 추가 (id에 맞게 elPlaceHolder 변경)

3) angularjs와 직접 연결된 저장버튼을 우회하도록 변경

. 기존의 id="ok" 였던 버튼을 숨겨놓고, id="okBefore" 로 대체.

. id="okBefore" 에서 에디터에서 입력된 값을 적용하도록 스크립트 실행

.. oEditors.getById["se2"].exec("UPDATE_CONTENTS_FIELD", []);

. id="ok" 버튼을 클릭하는 이벤트 발생하여 저장으로 유도.

4) angular의 controller 에서 ok이벤트를 처리하는 곳에 다음과 같은 값을 추가

(모델로 바로 바인딩되지 않기 때문에 후처리가 필요)

. var content = $("#se2").val();

  $scope.input.content = content;

[수정]

대체로 위와 동일하지만 기존에 입력되어 있는 값이 에디터 안에 들어가야 하는 부분에서 차이가 있다.

<textarea> 태그에서 모델입력을 연결해두면 문제가 해결 => ng-model="input.content"

. 신규등록의 경우 모델을 연결하지 않아도 상관없다.

*/

저장할때 문제가 있는데,  에디터에 입력되어 있는 값은 바로 value에 담겨지지 않아 모델과 연결이 되지 않는다. 저장할때에는 다음과 같은 명령어를 사용해야 한다.

oEditors.getById["se2"].exec("UPDATE_CONTENTS_FIELD", []);

그래서 angularjs를 쓰다보면 ng-click 를 통해 함수를 바로 호출할 수 있지만 그렇게 될 경우 oEditors 가 선안되지 않아 에러가 발생한다.

그래서 한번 우회해서 저장을 하도록 한다.

보면 $("#okBefore").click(function(){}) 이 부분이 있는데, 여기서 에디터에 쓰인 것을 value에 담기도록 한다음 ok버튼을 트리거를 통해 클릭이벤트를 유도한다.

# 저장할 때

저장하는 function에서 다음과 같이 jquery문법을 사용해 value를 가져오고 모델에 직접 넣어주어야 한다.

var content = $("#se2").val();

$scope.input.content = content;

# 수정할 때

수정할때에는 textarea에 모델이 연결되어 있으면 textarea가 에디터로 변환될때 입력값이 들어가 있게 되어 편리하다. 반대로 신규저장을 하는 경우에는 model 연결이 의미는 없다.

<textarea class="form-control" name="se2" id="se2" rows=10 ng-model="input.content"></textarea>

# 추가 팁

<textarea> 태그가 에디터로 변환하는데 약간의 딜레이가 있어 일반 textarea창이 보인다. 그럴때는 <textarea>를 안보이도록 하면 된다. 보이지 않는다 하더라도 저장되는데 문제는 없다.

<textarea class="form-control" name="se2" id="se2" rows=10 ng-model="input.content" style="display:none;"></textarea>