CKEditor란

우리가 게시판에 가면 게시판 자체에서 텍스트 뿐만 아니라 링크, 이미지, 동영상 같이 미디어 요소들도 올리고 글꼴변경, 글자크기 등 MS사의 WORD가 떠오르는 입력구간을 경험해 봤을 것이다. CKEditor는 div, textarea등에서 작용하여 이러한 일들을 가능하게 해준다. 학원에서 프로젝트할때 적용시키고 싶었지만 정확하게 어떤 것을 사용할 지 그리고 종류가 어떤 것이 있는지 잘 몰라서 이미지를 올리고 이미지 업로드만 적용되게 해놓았었는데 미리 알았더라면 추가 했을텐데.. 일단 이러한 것이고 회사에서 멀쩡히 쓰는 editor가 있을탠데 왜 갑자기 변경하지? 그 이유는 회사에서 쓰고 있던 게시판 editor는 옛날 네이버의 스마트에디터를 사용하고 있었는데 보안상의 문제나 여러가지 단점들 때문에 CKEditer로 변경해 보았다. (물론 아직 일주일 차라 뒤죽박죽인 내 코드를 commit하지는 않겠지만... 연습삼아 교체를 했습니다.)

적용

일단 친절하게 개발자를 위한 가이드를 제공한다. 가이드를 따라가면 적용자체는 정말 쉽다.
하지만 영어와 사이가 안좋기 때문에 읽는데 어려움이 있고 번역해서 보아도 어려운 부분이 많아서 여러사람들이 적용시킨 코드를 참고해서 적용시켜 보았다.

일단 많은 분들의 글들을 참고했지만 최종적으로 적용시킨 코드는 junesker님의 블로그를 참고 했다.

ckeditor builder를 눌러서 가보면 다운로드 전에 원하는 기능을 커스터마이징 할 수 있다. 그래서 필요한 것들을 추가하고 다운로드 한 뒤에 압축을 풀고 resources에 해당되는 위치 또는 js파일을 include 하는 위치에 붙여넣고 작업을 시작하면 된다.
전자정부 프레임워크 기준으로 ckeditor 폴더안에 원하는 jsp파일안에 ckeditor/contents.css와 ckeditor/ckeditor.js를 불러오고 에디터가 적용되었으면 하는 부분에 id를 주고(예를 들어 'ckedit') 제일 아래에 스크립트에 CKEDITOR.replace('ckedit'); 를 호출해주면 id가 적용된 부분에 ckeditor가 적용이 된다. 그리고 editor의 toolbar, 언어, plugin 등을 추가하고 수정할 수 있는 config.js에 커스텀하다가 빠진 것들이라던지 새로 추가하고 싶은 것들을 위에 올려놓은 개발자 가이드를 참고해서 추가하면 된다.

그렇게 하면 위에 그림처럼 (나 같은 경우 td안에 textarea에 적용) 적용이 된 모습을 볼 수 있다. 구현되어있는 게시판에 적용시킨다고 생각하고 DB처리는 생략하고 설명하겠다.
얼핏보면 문제 없이 완료된 모습이지만, 문제가 있다. 바로 이미지를 저장하는 것이다. 이미지 같은 경우 클라이언트의 로컬에서 서버에 등록이 되어야 하는데 그걸 처리해줄 controller 가 필요한 것이다. 그리고 리턴을 json으로 해야해서 그 변환 부분이 있어야 한다. 나는 map형식에 담아서 하다가 위에 링크에서 좀더 편한 gson으로 변환하는 방법이 있어서 그 방법을 적용했다.

적용된 화면!