javascript smartEditor 네이버 스마트에디터 게시판 구현 방법 how to make board using smartEditor
javascript smartEditor 네이버 스마트에디터 게시판 구현 방법 how to make board using smartEditor
SmartEditor 를 적용하게 되면 일반적인 Textarea 가 위와같이 보여지게 됩니다.
다양한 기능을 사용할 수 있게 되죠.
그럼 적용하는 방법을 알아보도록 하겠습니다.
https://developers.naver.com/opensource/tools/editor/
위의 페이지로 이동합니다.
SmartEditor 를 클릭하면 GitHub 페이지로 이동하여 다운로드 할 수 있습니다.
이제 다운로드 한 ZIP 파일의 압축을 풀어 프로젝트 안으로 복사 합니다.
필요한것은 위에 보이는 html 파일 3개와 css, img, js 폴더 입니다.
이제 준비는 끝났습니다. 구현부로 들어가보죠.
[게시판 등록 페이지]
|
1
2
3
4
5
6
7
8
9
10 |
<head>
<script type="text/javascript" src="${ctx }/resource/js/smartEditor/js/service/HuskyEZCreator.js"></script>
.
.
.
</head> |
cs |
헤더 부분에 HuskyEZCreator.js 를 추가해줍니다.
이 js가 아이프레임으로 에디터영역을 만들는 역할을 합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<table>
.
.
<tr>
<th>내용</th>
<td><textarea id="popContent" name="popContent" cols="108" rows="15"></textarea></td>
</tr>
</table> |
cs |
|
1
2
3
4
5
6
7
8 |
<script type="text/javascript">
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "popContent", //textarea ID
sSkinURI: "${ctx }/resource/js/smartEditor/SmartEditor2Skin.html", //skin경로
fCreator: "createSEditor2",
});
</script> |
cs |
이제 스크립트에 위의 소스를 추가 해 줍니다.
스킨 경로와 textarea ID를 잘 맞춰서 수정해줍니다.
해당 화면을 실행하면 textarea에 smartEditor가 적용된 것을 보실 수 있습니다.
이제 에디터의 편집 기능을 활용 할 수 있습니다.
그럼 해당 내용을 서버로 전달해 보겠습니다.
이대로만 구현하게 되면 popContent 의 값은 아무것도 넘어가지 않습니다.
작성은 SmartEditor에서 했고 popContent Textarea에는 아무값도 없기 때문이죠.
그래서 SmartEditor에서 작성한 값을 textarea 로 전달하는 코드가 필요합니다.
|
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 |
if(editMode=='I'){
if(confirm("등록 하시겠습니까?")==true){
try{
oEditors.getById["popContent"].exec("UPDATE_CONTENTS_FIELD", []);
document.frm.action = regAddr;
document.frm.submit();
swal("","등록 되었습니다.","success");
}catch(exception){
swal("","데이터 등록을 실패하였습니다.","error");
}
}
}else{
if(confirm("수정 하시겠습니까?")==true){
if(deleteTarget.length > 0){
document.frm.deleteTarget.value = deleteTarget;
}
try{
oEditors.getById["popContent"].exec("UPDATE_CONTENTS_FIELD", []);
document.frm.action = udtAddr;
document.frm.submit();
swal("","수정 되었습니다.","success");
}catch(exception){
swal("","데이터 수정을 실패하였습니다.","error");
}
}
} |
cs |
위의 코드중 볼드처리된
oEditors.getById["popContent"].exec("UPDATE_CONTENTS_FIELD", []);
코드가 SmartEditor의 값을 Textarea로 전달 해주는 역할을 합니다.
<p></p>으로 감싸진 여러 태그가 적용된 text를 전달하게 되죠.
위와 같이 작성하여 디비에 저장해보도록 하겠습니다.
<p><strong><span style="color: rgb(255, 0, 0); font-size: 18pt;">스마트</span></strong><span style="color: rgb(0, 117, 200); font-size: 36pt;">에디터</span><span style="color: rgb(255, 170, 0);"> 테스트</span> </p>
위와 같이 여러 태그가 적용된 text가 저장이 되게 됩니다.
뷰에서는 그냥 해당값을 html 에 입력만 해주면 되죠. ( 아래와 같이 Model로 받았을 경우)
model.addAttribute("popupVo", popupVo);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<body>
.
.
.
<p id="popContent">${popupVo.popContent}</p>
.
.
.
</body> |
cs |
따로 구현을 하지 않아도 왠만한 텍스트 에디터의 기능을 사용할 수 있어 매우 유용합니다.