JSP - 컴포넌트 - SmartEditor JSP에 적용하기

SmartEditor - http://dev.naver.com/projects/smarteditor

---

# SmartEditor 에 대한 궁금점은 http://dev.naver.com/projects/smarteditor 에서 확인할 수 있으며, 매주 매일 매월 업데이트되는 정보또한, 위 사이트에서 확인이 가능합니다.

# 본 문서에서 참고했던 내용은 모두 위의 사이트에서 참고하고, 공부해서 만든 문서임을 밝힙니다.

# SmartEditor 에 대한 설치 및 적용방법은 여기를 참고하세요!

---

▲ [1] 설치하는 방법은 > 여기를 클릭하세요 ^^ 위와 같이 웹 폴더에 추가 합니다.

▲ [2] 스마트에디터를 삽입할 JSP 페이지를 하나 만들어봅니다 :D

▲ [3] 이름은 SmartEditor 로 하겠습니다. 임의로 지정해도 됩니다. 상관없죠 뭐 흐흐.

▲ [5] Finish 를 클릭하고 마법사를 빠져나옵니다

▲ [6] 이제부터는 새롭게 만든 JSP 문서에 스마트에디터를 사용하기 위해 소스 코드를 넣어야 합니다.

이미 스마트에디터의 배포판에는 설치 가이드 문서가 있으니, 참고하시면서 작업하시면 더욱 수월 합니다 ^^

▲ [7] 먼저 스마트에디터를 사용하기 위해서 스크립트를 선언합니다.

위의 src 코드를 주의해주세요!

경로가 맞아야 합니다. 본인의 컴퓨터에 import되어있는 스마트에디터의 경로에 맞게 지정해주세요!!!!

▲ [8] 경로는 일단 이곳에 복사를 하고 나서 수정하면 됩니다. 캐릭터셋은 국제화에 맞게 UTF-8을 해주는 센스(기본 값이죠)

▲ [9] 다음은 textarea 로 구성된 스마트 에디터의 몸체를 넣어줘야 합니다. JSP 문서의 BODY 부분에 넣어주면 되겠습니다.

▲ [10] 스크립트로 이루어진 스마트에디터를 사용하기위해, 스크립트 함수도 등록해줍니다.

<script></script> 틀 내에 삽입해야 하며, 설치가이드 문서에는 코드만 있으므로, 아래의 이미지를 참고하여, 스크립트 태그도 생성해주세요.

▲ [11] 위의 이미지 처럼 만드시면 됩니다. 그리고 표시된 부분에 경로를 변경해줘야 합니다. SEditorSkin.html이 있는 경로(예; /fckeditor/SeditorSkin.html)로 변경해주세요!

▲ [12] SEditorSkin.html 이 존재하는 위치는 위와 같습니다. 물론 PC마다 다르겠지만, 그건 찾아보셔야죠~;; 위의 경로에 맞게 오른쪽 소스의 sSkinURI : 부분을 수정해주시면 됩니다.

▲ [13] 마지막으로 폼 전송시에 작업되어질 내용의 소스가 포함된 스크립트를 복사합니다.

이전의 소스와 마찬가지로 이 소스도 JSP 문서 내의 <script></script>태그 내에 위치해야 합니다.

▲ [14] 이 코드도 소스만 존재하므로, 임의로 function write() 라는 함수를 만들고 그 속에 복사했습니다.

▲ [15] 이제 소스를 수정합니다. write()의 try{}의 표시된 부분에 내용은 위와 같이 변경합니다.

보시면 알겠지만, form 의 이름이 되어야 합니다. form 태그가 동작하도록 해야하는 submit()이 있기 때문입니다.

또한, form 태그가 동작하게하는 버튼 태그에도 onClick()이벤트를 주어 write()함수를 호출하도록 합니다.

▲ [16] 이제 대충 실행해볼까요? 흐흐흐흐흐

▲ [17] 어이쿠 , 뭔가 뜨긴 떴는데, 많이 이상합니다.

▲ [18] 보통은 이 부분에 문제가 있을 가능성이 많지만,

제일 처음에 추가했던 [7] 번과정에서 했던 작업 중 경로가 잘 못 되었을 가능성이 많습니다.

위의 페이지처럼 나온다면, 제대로 적용이 된 것이 아니기 때문에, 경로를 제대로 수정해줘야 합니다.

▲ [19] 제가 본격적으로 적용시켜본 소스의 내용입니다.

▲ [20] 뭐..뭔가 복잡한 것이 많아 보이지만, 위의 과정을 그대로 따라해 왔다면, 쉽게 이해할 수 있는 부분입니다 ^^

▲ [21] 기존에 만들었던 게시판에 버튼만 추가하여, 새로운 에디터로 글쓰는 테스트를 해보았습니다.

▲ [22] 이전에는 참 빈약했던 글쓰기가 아주 이쁘게, 다양한 효과를 낼 수 있도록 구현이 된 것을 확인할 수 있습니다.

▲ [23] 글 등록도 잘되는 군요.

▲ [24]테스트로 등록한 글이 ~ 아주 이쁘게 나옵니다 ^^ 태그 등도 사용이 가능하기 때문에, 이미지 링크 등도 가능해요.

여기까지, 스마트 에디터 설치를 끝내도록 합니다 :D