일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- db
- interface
- Numpy
- Python
- git
- 함수
- ai
- Pattern
- framework
- Github
- learning
- error
- LIST
- Deep
- 자바
- javascript
- Analysis
- mysql
- DeepLearning
- mariaDB
- Web
- Spring
- data
- 인공지능
- java
- SSH
- Linux
- Security
- Server
- centos
- Today
- Total
PostIT
[JSP/Spring]네이버 스마트에디터 Textarea에 있는 값 전송하기 본문
게시판 작성 중에 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";
}
}
});
}
});
'Script > JavaScript' 카테고리의 다른 글
[Naver D2]2016년과 이후 JavaScript의 동향 - 퍼옴 (0) | 2016.12.08 |
---|---|
[JavaScript]<a>태그에서 확인 경고창 띄우기 (0) | 2016.11.28 |
[PhantomJS]PhantomJS를 활용한 웹 스크레이핑 (0) | 2016.11.10 |
[JavaScript] Web에 SlideShow 만들기(Spring, Jsp) (3) | 2016.08.09 |
[JavaScript]옵션에서 값 가져오기. Select Option 자바 스크립트(이메일 입력시) (0) | 2016.06.18 |