Spring project에 네이버스마트에디터 api 적용하기

스마트 에디터 깃허브에서 2.9 버전의 zip 파일 다운로드

https://github.com/naver/smarteditor2/releases

Releases · naver/smarteditor2

다운로드 후 압축을 풀어주고 smarteditor2-2.9.2\dist 경로 안에 있는 폴더와 파일들을 복사한다.

복사 후 src\main\webapp\resources\smarteditor 경로를 생성 후 복사 한 파일들을 붙여넣기 해 준다.

jsp 파일에 script 경로를 추가 해 준다.

<!-- smart editor -->
<!-- head 안 쪽에 작성-->
<script type="text/javascript" src="/resources/smarteditor/js/HuskyEZCreator.js" charset="utf-8"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

우리는 내용이 작성 될 </body></html> 사이에 script 코드를 작성 해 준다.

<script type="text/javascript" id="smartEditor">
	var oEditors = [];
 		//스마트에디터 프레임생성
		nhn.husky.EZCreator.createInIFrame({
 		oAppRef : oEditors,
 		elPlaceHolder : "editorTxt", //<textarea> ID 값 입력.
 		sSkinURI : "/resources/smarteditor/SmartEditor2Skin.html",
 		fCreator : "creatorSEditor2",
 		htParams : {
 				//toolbar 사용여부
 				bUseToolbar : true,
 				//입력창 크기 조절
 				bUseVericalResizer : true,
 				//모드탭 (Editor|HTML|TEXT)
 				bUseModeChanger : true,
 				//변경사항이 저장 되지 않을 수 있습니다 경고창 제거
 				fOnBeforeUnload : function(){}
 				}
 			});

그럼 이렇게 api 껍대기가 씌워지게 된다.

작성 한 내용을 textarea안에 변환 시켜주기 위해

 		//스마트에디터의 값을 텍스트 컨텐츠로 변환 
 		$("#save_btn").on("click",function(e) {
 			oEditors.getById["editorTxt"].exec("UPDATE_CONTENTS_FILED", []);
 			console.log(oEditors.getById["editorTxt"].exec("UPDATE_CONTENTS_FILED", []));
 			console.log("눌리긴하니?");
 		});

코드도 추가로 작성 해 준다.