javascript smartEditor 네이버 스마트에디터 게시판 구현 방법 how to make board using smartEditor
SmartEditor 를 적용하게 되면 일반적인 Textarea 가 위와같이 보여지게 됩니다.
다양한 기능을 사용할 수 있게 되죠.
그럼 적용하는 방법을 알아보도록 하겠습니다.
//developers.naver.com/opensource/tools/editor/
위의 페이지로 이동합니다.
SmartEditor 를 클릭하면 GitHub 페이지로 이동하여 다운로드 할 수 있습니다.
이제 다운로드 한 ZIP 파일의 압축을 풀어 프로젝트 안으로 복사 합니다.
필요한것은 위에 보이는 html 파일 3개와 css, img, js 폴더 입니다.
이제 준비는 끝났습니다. 구현부로 들어가보죠.
[게시판 등록 페이지]
<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 |
<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 |
따로 구현을 하지 않아도 왠만한 텍스트 에디터의 기능을 사용할 수 있어 매우 유용합니다.