[웹 에디터] 네이버 SmartEditor2 설치 ( javascript 내부 구현 방법 )

 

간단하게 사용할 수 있는 web editor를 하나 추가할 일이 있어서 naver에서 만들었으니 믿을만 하겠지 하고 설치를 하기로 하였습니다.  그런데 그냥 설치 하는 방법은 매뉴얼만 보면서 하면 되는데 요즘에는 화면 그리는 툴들을 많이 사용하고 있어서 javascript function 안에서 구현을 해야 하는 상황이 발생하여 다음에 또 써야할 일이 발생하면 사용하려고 작성 합니다.  예전에 HTML Tag만 가지고 구현하느라 1주일 걸린적이 있는데 그 소스는 어디 갔는지 모르겠네요.

 

순서

1. Source 다운로드

2. 일반적인 설치 방법

3. javascript 내에서 설치 방법

 

 

1. Source 다운로드

기존에 사용하던 개발자 url에서는 다운로드가 되지 않고 github에서 다운로드를 해야 합니다.

https://github.com/naver/smarteditor2

그리고 smartEditor 3.x 버전은 공개를 하지 않는다고 하네요.  저는 2.x 버전 만으로도 충분.

Clone or download를 클릭해서 확장된 메뉴 중 Download ZIP을 선택하면 압축된 형태로 다운로드가 진행 됩니다.  다운로드가 완료 되면 파일이 있는 디렉토리로 이동하여 압축풀기를 해줍니다.  디렉토리 구조를 보면 dist와 workspace 두개가 있는데 이중에 dist를 이용하여 작업을 진행 합니다.

2. 일반적인 설치 방법

 

그냥 html, jsp, php등에 설치 하는 방법은 네이버 매뉴얼에 잘 설명이 되어 있습니다.

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

 

간단하게 요약해서 설명 하면

2.1 압축을 푼 파일을 적당한 곳에 복사

dist 아래에 있는 파일들을 웹 서버에 복사를 하는데 웹에서 path를 잡을 수 있는 곳이면 아무 곳이나 가능하지만 너무 깊이 숨겨 놓으면 안되겠죠.

 

2.2 js 추가

smartEditor의 기본이 되는 javascript 파일을 작업하려는 파일 상단에 추가 합니다.

<script type="text/javascript" src="상위경로/js/service/HuskyEZCreator.js" charset="utf-8"></script>

2.3 Textarea 추가

 

웹 에디터를 사용할 textarea를 작업 파일에 추가 합니다.  id는 나중에 사용해야 하므로 적당한 명칭을 부여 합니다.

<textarea name="weditor" id="weditor" rows="10" cols="100"></textarea>

2.4 editor 생성 javascript

 

2.3에서 생성한 textarea에 웹 에디터를 추가하기 위한 javascript를 작성 합니다.  매뉴얼에서 복사해서 사용하면 됩니다.

elPlaceHolder에 위에서 작성한 id를 입력 합니다.

sSkinURI에는 복사한 path를 잘 맞추어 기입합니다.

<script type="text/javascript">   var oEditors = []; nhn.husky.EZCreator.createInIFrame({     oAppRef: oEditors,     elPlaceHolder: "weditor",     sSkinURI: "경로/SmartEditor2Skin.html",     fCreator: "createSEditor2" });   </script>

2.5 결과

2.6 전체 소스

좀 허접하지만 2.5에 있는 모양을 만들기 위해 제가 만든 test.html 전체 소스입니다.

webeditor    <script type="text/javascript" src="./dist/js/service/HuskyEZCreator.js" charset="utf-8"></script>   <textarea name="weditor" id="weditor" rows="10" cols="90"></textarea>   <script type="text/javascript">   var oEditors = []; nhn.husky.EZCreator.createInIFrame({     oAppRef: oEditors,     elPlaceHolder: "weditor",     sSkinURI: "./dist/SmartEditor2Skin.html",     fCreator: "createSEditor2" });   </script>

좀 허접이 아니고 진짜 허접하네요.  dist에 있는 파일을 바로 메인에 복사해서 사용했습니다.

 

 

3. javascript 내에서 설치 방법

 

일반적인 방법으로 설치를 해보았다면 이것도 별거 없습니다.  그냥 function 안에서 구현을 한것 이외에는 나머지 스크립트는 동일 합니다.

 

3.1 구현 방법

$.getScript() jQuery를 이용하여 javascript 내에서 javascript를 불러옵니다.  그리고 불러온 js를 이용한 코드를 내부에 기입하면 됩니다.

 

textarea와 button을 화면에 표시되고 HTML Tag를 적용시킬 수 있는 부분에 설정을 해줍니다.  툴에 따라 component, element, division등등이 될 수 있겠죠.  버튼도 이벤트를 직접 호출 할 수 없는 경우에는 가상으로 만들어서 사용하면 됩니다.

 

textarea를 먼저 정의하지 않으면 id를 찾을 수 없어 Cannot read property 'parentNode' of null / HuskyEZCreator.js 오류가 발생 할 수 있습니다.

 

3.2 전체 소스

 

화면 초기화가 완료되는 함수에 넣어서 구현한 내용입니다.

function onLoadedFunction() {            this.eleTxt.setHtml(‘<textarea name="ir1" id="ir1" rows="10" cols="100"></textarea>’); this.eleBtn.setHtml(‘<button class=”saveBtn”>저장</button>’);              $.getScript("./dist/js/service/HuskyEZCreator.js", function() {                      var oEditors = [];                      nhn.husky.EZCreator.createInIFrame({                                 oAppRef: oEditors,                                 elPlaceHolder: "ir1",                                 sSkinURI: "./dist/SmartEditor2Skin.html",                                 fCreator: "createSEditor2"                      });                       $(document).on('click', '.saveBtn', function () {                                                      var val2 = oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);                                 this.contents = $('#ir1').val();                                 alert(this.contents);                                 this.onSubmitBtnClick();                      });            });            };

3.3 결과 화면

 

위의 코드를 실행하면 나오는 결과 화면 입니다.

4. size 조절

 

화면에 따라 에디터의 사이즈를 조절해야 하는 경우가 발생 합니다.  그런데 html을 아무리 찾아보고 비슷한걸 수정해도 사이즈는 변경이 안되는데 사이트 변경은 js 파일에서 관리 합니다.

 

/dist/js/service에 가면 SE2BasicCreator.js 파일이 있습니다.  위치는 버전에 따라 하나 윗단계인 js에 들어 있기도 합니다. SE2BasicCreator.js 파일을 열고 아래와 같은 내용을 찾아서 수정 합니다.

var htDimension = {                      nMinHeight:205,                      nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,                      nHeight:elIRField.style.height||elIRField.offsetHeight,                      nWidth:elIRField.style.width||elIRField.offsetWidth            };

 

높이 : nMinHeight:205

가로 : nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

 

화면에 따라 사이즈가 여러개 필요하다고요?

그럼 SmartEditor2xxx.html 파일과 SE2BasicCreator.js 파일을 여러개 복사해서 이름을 변경하고 각 html 파일에서 다른 js 파일을 불러오면 됩니다.