스마트 에디터 내용 검색 방법

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 폴더 입니다.

이제 준비는 끝났습니다. 구현부로 들어가보죠.

[게시판 등록 페이지]

헤더 부분에 HuskyEZCreator.js 를 추가해줍니다.

이 js가 아이프레임으로 에디터영역을 만들는 역할을 합니다.

이제 스크립트에 위의 소스를 추가 해 줍니다.

스킨 경로와 textarea ID를 잘 맞춰서 수정해줍니다.

해당 화면을 실행하면 textarea에 smartEditor가 적용된 것을 보실 수 있습니다.

이제 에디터의 편집 기능을 활용 할 수 있습니다.

그럼 해당 내용을 서버로 전달해 보겠습니다.

이대로만 구현하게 되면 popContent 의 값은 아무것도 넘어가지 않습니다.

작성은 SmartEditor에서 했고 popContent Textarea에는 아무값도 없기 때문이죠.

그래서 SmartEditor에서 작성한 값을 textarea 로 전달하는 코드가 필요합니다.

위의 코드중 볼드처리된

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>&nbsp;</p>

위와 같이 여러 태그가 적용된 text가 저장이 되게 됩니다.

뷰에서는 그냥 해당값을 html 에 입력만 해주면 되죠. ( 아래와 같이 Model로 받았을 경우)

model.addAttribute("popupVo", popupVo);

따로 구현을 하지 않아도 왠만한 텍스트 에디터의 기능을 사용할 수 있어 매우 유용합니다.