SmartEditor

 

게시판 글 입력 및 수정에 SmartEditor 적용시키기 

 

우선은 

 

naver.github.io/smarteditor2/user_guide/

SmartEditor2 사용자 가이드 · GitBook

가이드 따라하면 문제가 없이 잘 된다고 한다.

 

2.0버전을 설치하는 것과 0.3.x 버전에서 업그레이드하여 사용하는 방법이 있다고 한다

 

나는 2.0버전 설치했다.

 

우선은 배포파일을 다운로드 하여 준다.

 

github.com/naver/smarteditor2/releases

Releases · naver/smarteditor2

버전별로 나뉘어져있다 원하는 것 다운 받아주면 될 것 같다

 

나는 2.10.0 버전의 smarteditor2-2.10.0.tgz 다운받았다

 

압축풀면 dist폴더에 다 들어있으니 통째로 가져다가 사용하면 된다

사용할 editor의 js와 iframe에 씌울 html이 들어있다

editor 버전도 여러개 있는 것 같은데 나는 HuskyEZCreator를 사용했다

<script type="text/javascript" src="./smarteditor2-2.8.2.3/js/HuskyEZCreator.js" charset="UTF-8"></script>

<script type="text/javascript">
/**
 * 키 밸류로 적으면 적용이 된다
 */
 
 
 
 var editor_obj=[];
 nhn.husky.EZCreator.createInIFrame({
	 oAppRef : editor_obj,
	 elPlaceHolder : "navereditor",
	 sSkinURI : "./smarteditor2-2.8.2.3/SmartEditor2Skin.html",
	 hParams : {
		 //툴바사용 여부
		 bUseToolbar : true,
         // 수직 스크롤바
		 bUserVerticalResizer : true,
         //에디터 사용 모드 변경 사용
		 bUseModeChanger : true,
	 }
 });

스크립트 올려주고

또 스크립트 올려준다

 

IFrame은 html에 공간을 뻥 뚫어놓고 그 부분만 변경되도록 만든다. 전체페이지가 refresh될 필요 없게

 js의  sSkinURI는 사용할 스킨 골라서 쓰면 된다. 여기서 경로를 잘 설정해줘야 한다 

elPlaceHolder에 입력한  value를 textarea에 name으로 사용하면 찾아서 editor 적용해준다.

 

<textarea cols="30" rows="10" name ="content" id = "navereditor" class= "form-control"></textarea>

exec("UPDATE_CONTENTS_FIELD",[]); TEXTAREA에 값이 입력된다

submit까지 실행하면 값도 전달 됨

 
 function save(){
	 //실행 명령어 여러개 
	 editor_obj.getById["navereditor"].exec("UPDATE_CONTENTS_FIELD",[]);
	 document.wForm.submit();
 }