PostIT

[JSP/Spring]네이버 스마트에디터 Textarea에 있는 값 전송하기 본문

Script/JavaScript

[JSP/Spring]네이버 스마트에디터 Textarea에 있는 값 전송하기

shun10114 2016. 8. 20. 21:06

게시판 작성 중에 Textarea를 사용하는 일이 발생되는데,

기본적인 태그로는 기능이나 모양적으로 제한이 많아,

스마트 에디터를 다운받아 사용하게 되었습니다.


네이버 스마트에디터 다운로드 : http://dev.naver.com/projects/smarteditor/download



개인적으로 공부하고 있는 프로젝트 폴더입니다.

저는 main.jsp에 대부분의 페이지를 Include시켜서 사용하고 있습니다. 그래서 main.jsp에 밑에 스크립트를 넣었습니다.

(SE2 폴더가 네이버스마트 에디터 폴더입니다.)





네이버 스마트에디터를 사용할 JSP(HTML)페이지에 아래 태그를 넣어줍니다.

<!-- 네이버 글쓰기 자바스크립 -->

<script type="text/javascript" src="SE2/js/HuskyEZCreator.js" charset="utf-8"></script>

<script type="text/javascript">

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

oAppRef : oEditors,

elPlaceHolder : "smartEditor",

//SmartEditor2Skin.html 파일이 존재하는 경로

sSkinURI : "SE2/SmartEditor2Skin.html",

htParams : {

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

bUseToolbar : true,

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

bUseVerticalResizer : true,

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

bUseModeChanger : true,

fOnBeforeUnload : function() {

}

},

fOnAppLoad : function() {

//기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용

oEditors.getById["smartEditor"].exec("PASTE_HTML", [ "" ]);

},

fCreator : "createSEditor2"

});


//네이버 에디터 작성 데이터 전송하기 

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

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

});


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

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

});

</script>



위아 같이 smartEditor라고 textarea에 값을 넣어주면 적용이 됩니다. 그러면, 아래와 같이 적용이 됩니다.




#submitBoardBtn에 버튼같은 경우를 통해 smartEditor에 존재하는 내용이 서버에 전송되게 됩니다.

board.js에는 밑에와 같이 입력해주었습니다.

사용하는 버튼에 명칭에 따라 수정하시면 될 것 같습니다


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

var boardAccount = $('#boardAccount').val();

var boardSubject= $('#boardSubject').val();

var smartEditor= $('#smartEditor').val();

if(boardSubject.trim().length < 4){

alert("4글자 이상 입력하세요.");

$('#boardSubject').focus();

} else{

$.ajax({

url : 'boardInsert.do',

type : 'post',

datatype : 'json',

data : {

"boardAccount" : boardAccount,

"boardSubject" : boardSubject,

"smartEditor" : smartEditor

},

success : function(data){

if(data=="ok"){

location.href="boardList.do";

}

}

});

}

});


Comments