CKEditor + CKFinder for java 설치와 설정

프로그래밍/JSP

CKEditor + CKFinder for java 설치와 설정

김재미 2011. 10. 5. 20:50

1. ckeditor 다운로드
http://ckeditor.com/download

위 링크에 들어가서 현재 최신 버전인

다운로드

2. 압집을 풀고 dkeditor_3.6.2/ckeditor 폴더를 웹 콘텐트 밑 원하는 폴더에 넣는다.

나는 Eclipse를 사용해서 바로 폴더를 붙여 넣었다.

엑박이 뜨넹 ^^;
js파일은 워닝도 에러처리 되서 그렇다고 하는데, 돌아가는데 아무런 지장이 없다.

3. 그리고 ckeditor를 사용하고 싶은 jsp 페이지에

...<head>
<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
</head>

...
<body>
....

<textarea name="CONTENT" cols="150" rows="50"></textarea>

//<![CDATA[

CKEDITOR.replace('CONTENT');

//]]

</script>

..</body>

노란색 부분만 추가해주면 ckeditor 사용 가능!

>> 결과

이렇게 변한당 ^_^

하지만 중요한건 이렇게 되면 글씨체나 스타일은 마음대로 변경가능하지만
사진 업로드가 안된다.
그러면 나는 아무런 의미가 없다란 생각으로 이미지 업로드도 하고자
ckfinder도 설치 하기로 했다.

1. ckfinder 설치

http://ckfinder.com/download

위 링크에 들어가서 다운로드한다

자바 클릭 후 다운로드 한다.

2. 알집을 풀고 ckfinder_java_2.1/CKFinderJava.war 파일을 풀어준다.

그러면
ckfinder
METE-INF
WEB-INF
폴더를 다 우리 프로젝트에 넣어 줘야 되는데
일단 ckfinder은 통째로 복사해서 프로젝트 웹콘텐트 및 원하는 곳에 붙여넣기 한다.

그리고
META-INF 안에 content.xml 파일을 자기 프로젝트의 META-INF 폴더에 넣어주고
열어서 안에

<?xml version="1.0" encoding="UTF-8"?>

CKFinderJava 를 자신의 프로젝트 이름으로 변경 해 준다.

그리고 WEB-INF 폴더 안에

lib 폴더 안에 있는 jar 파일을
자신의 프로젝트 WEB-INF/lib 폴더에 전부 붙여 넣기 하고 (사실 전부 필요한건지 잘 모르겠다)

web.xml 파일을 자신의 프로젝트 WEB-INF/ 안에 넣어 주던가
만약 원래 web.xml 파일이 있었다면 잘 골라서 붙여 넣기 해 준다.
따로 변경할 부분은 없다.

그리고 중요한 건 config.xml 파일인데,
거의 모든 설정 파일이 들어가 있다.
열어보면

밑줄 쳐진 부분만
true
실제로 저장할 디렉토리(자신의 하드디스크 경로를 적어준다)
프로젝트 내에 저장할 폴더(나는 userfiles 라는 폴더를 만들었다)

를 설정해 주면 다른 부분은 나도 잘 모르겠다.
여러 설정을 직접 해줄수 있다.

그리고 또 다시 ckeditor/config.js 파일을 연다

네모 박스 친 부분을 설명하자면

config.filebrowserBrowseUrl = '/자신의 프로젝트명/ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = '/자신의 프로젝트명/ckfinder/ckfinder.html?type=Images';

config.filebrowserFlashBrowseUrl = '/자신의 프로젝트명/ckfinder/ckfinder.html?type=Flash';

config.filebrowserUploadUrl = '/자신의 프로젝트명/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl = '/자신의 프로젝트명/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = '/자신의 프로젝트명/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

저 부분을 바꿔주고 저장하고 실행하면 이미지 업로드 성공!

>> 결과

결과인데.
사실 이클립스에서 사용하면 바로 업로드 사진이 보여지지 않는다.

그부분이랑 한글 파일업로드 문제는 아직 해결하지 않았지만.
내가 이 프로젝트를 실제로 사용할 날이 온다면 해결해 보도록 하겠고,
일단 기능 구현 완료!

저작자표시