[jsp] 웹에디터 CKEditor와 CKFinder 함께 사용하기
Spring MVC로 만들어진 웹어플리케이션 기본 웹어플리케이션입니다.
이곳에 ckeditor와 ckfinder를 이용하여 웹에디터를 사용하려고 합니다.
기본적인 사항에 대해서는 설명을 제외하고 설치 후 실행되는 것을 바로 보도록 하겠습니다.
(프로젝트명은 sample이 아니고 sample2입니다. 첨부파일 참고)
1. ckeditor 복사
ckeditor는 웹에디터이고 ckfinder는 파일 및 이미지를 업로드 할 수 있는 플러그인이라고 보면 될 것입니다.
자바용으로 제공되는 ckeditor가 있지만 범용적으로 사용 할 수 있도록 자바스크립트되어 있는 버전을 설치 하였습니다.
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.5/ckeditor_3.6.5.zip
압축 푼 후에 /sample2/web/에 ckeditor 디렉토리를 복사합니다.
2. ckfinder 복사
ckfinder는 다음에서 ckfinder_java_2.3.zip을 다운 받습니다.
http://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.3/ckfinder_java_2.3.zip
압축을 풀고, CKFinderJava.war을 zip파일로 확장자를 변경하고 압축을 풀어서
ckfinder 디렉토리를 /sample2/web/에 ckeditor 디렉토리를 복사합니다.
lib 디렉토리에 보면 CKFinder-2.3.jar, CKFinderPlugin-FileEditor-2.3.jar, CKFinderPlugin-ImageResize-2.3.jar 을 복사하여
프로젝트의 lib에 추가해 줍니다.
지금 설치하는 것은 tomcat7에 설치하고 테스트하는 거라서 thumbnail 이미지가 잘 보이지 않습니다.
CKFinder-2.3.jar을 삭제하고, http://nimba.tistory.com/entry/jsp-ckfinder-thumbnail-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B3%B4%EC%9D%B4%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%98%A4%EB%A5%98-%EC%88%98%EC%A0%95 에 첨부되어 있는 CKFinder-2.3_jobtoy_20121114.jar로 교체합니다.
CKFinderJava\WEB-INF\config.xml을 파일이름을 변경하여 /sample2/web/WEB-INF/conf/ckfinder-config.xml 로 복사합니다.
3. ckfinder 파일업로드를 위한 web.xml 설정하기
ckfinder에서 파일업로드 등과 같은 기능을 위해서 아래 코드를 web.xml에 추가합니다.
<!-- CKFINDER start-->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/conf/ckfinder-config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
<filter>
<filter-name>FileUploadFilter</filter-name>
<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
<init-param>
<param-name>sessionCookieName</param-name>
<param-value>JSESSIONID</param-value>
</init-param>
<init-param>
<param-name>sessionParameterName</param-name>
<param-value>jsessionid</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>FileUploadFilter</filter-name>
<url-pattern>
/ckfinder/core/connector/java/connector.java
</url-pattern>
</filter-mapping>
<!-- CKFINDER end-->
4. ckfinder 파일업로드 웹어플리케이션 경로 설정
/sample2/web/WEB-INF/conf/ckfinder-config.xml 열어보면
상단에 baseDir, baseURL이 있습니다. 여기서 baseURL은 sample과 동일한 경로에 위치해야 합니다.
editorFiles2란 웹어플리케이션을 하나 더 만들어서 동일한 도메인의 웹서버에 배포하여도 상관 없을 것입니다.
여기서는 톰캣에 context를 하나더 등록해 주었습니다. (server,xml에서 직접 등록함)
<Context docBase="C:/sample2/editorFiles2" path="/editorFiles2" reloadable="true"/>
baseDir은 웹서버 기동시에 없다면 ckfinder가 자동으로 생성해 줍니다.
이미지를 서버로 업로드하면 자동으로 분류되어 images에 저장되게 됩니다.
5. ckeditor의 config.js 설정하기
첨부된 config.js를 그대로 이용하면 되고, 자신의 웹프로젝트명에 맞추어서 /sample2/ 정도만 변경해 주면 될 것입니다.
6. jsp 파일에 적용하기
/sample2/web/WEB-INF/pages/board/list.jsp 와 같이 코딩하면 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
<script type="text/javascript" src="<c:url value="/ckeditor/ckeditor.js" />"></script>
<script type="text/JavaScript">
window.onload=function(){
CKEDITOR.replace('contents',{enterMode:'2',shiftEnterMode:'3'});
};
</script>
</head>
<body>
...
<table width="100%" border="0" cellpadding="0" cellspacing="1" >
<tr>
<td>
<%-- CKEDITER --%>
<textarea id="contents" name="contents" style="width:100%; height:50%; resize:none;">
내용을 입력해 주세요
</textarea>
</td>
</tr>
</table>
...
</body>
</html>
7. 브라우저에서 보기
웹서버를 실행합니다.
sample2.war[jsp] 웹에디터 CKEditor와 CKFinder 함께 사용하기
'programming > jsp' 카테고리의 다른 글
| [JSTL] 다국어 비교하기 (0) | 2013.01.29 |
|---|---|
| [jsp] 다중 IP에서 IIS와 톰캣으로 80, 443 port(포트) 여러개 쓰기 환경 설정 (0) | 2013.01.17 |
| [jsp] ckfinder thumbnail 이미지 보이지 않는 오류 수정 (0) | 2012.11.14 |
| [jsp] 웹어플리케이션 SSO 방식 (0) | 2012.11.13 |
| [jsp] iframe resize (0) | 2012.07.09 |