FCKeditor java 버전 설치
- 환경
O/S : Window XP Professional
Servlet Engine : Tomcat 5.0.28
Character Set : UTF-8
IDE Tool : Eclipse 3.2
FCKEditor Version : 2.3.1( http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.3.1.zip?download )FCKEditor.Java Version 2.3
( http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511 )
1. editor 폴더를 생성하고 톰캣 컨텍스트의 루트를 editor 폴더 경로로 지정
2. fckeditor 다운로드
2-1. http://www.fckeditor.net/download/ 에서 다운로드
2-2. editor 폴더에 다운로드 된 압축 파일의 압축을 풉니다.
2-3. 압축을 풀면 나오는 디렉토리인 FCKeditor 폴더를 editor 하위 폴더로 되게끔 이동합니다.
3. 톰캣을 가동한 후 FCKeditor\_samples\default.html 을 실행하여 fckeditor 를 실행
4. 그러나 이미지 업로드를 할려고 서버 보기를 할 경우 에러가 발생합니다.
5. java 버전용 fckeditor 를 editor 폴더로 다운로드(FCKeditor-2.3.zip)
5-1. http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511 에서 다운로드
5-2. editor 폴더에 다운로드 된 압축 파일의 압축을 풉니다.
6. 지정폴더\editor\FCKeditor-2.3\web 하위에 있는
_samples 폴더와 WEB-INF 폴더를 각각 이동.
6-1. 2번에서 만들어진 \editor\FCKeditor\_samples 폴더에
\editor\FCKeditor-2.3\web\_samples 폴더를 붙여넣기 합니다.
6-2. \editor\WEB-INF 폴더에 \editor\FCKeditor-2.3\web\WEB-INF 폴더를 붙여넣기 합니다.
* 새로운 컨텍스트라면 web.xml 을 그대로 덮어씌운 후 복사하고,
기존에 컨텍스트에 다른 체계가 돌아가 있다면 web.xml 내용 중 <web-app> 부분을
기존 사용중인 컨텍스트에 web.xml 에 붙여넣기 합니다.
( load-on-startup 이 이미 있다면 숫자를 변경함 )
완료하면 폴더 구조는 다음과 같습니다.
( UserFiles 디렉토리는 사용자가 업로드한 이미지 저장 디렉토리입니다. )
* 톰캣 리스타트시에 콘솔 창에 다음과 같이 업로드 제한 파일 확장자 리스트가 나옵니다.
( web.xml 파일에 DeniedExtensionsFile 이란 param-name 으로 지정되어 있습니다. )
7. jsp 샘플을 실행
그러나 다음과 같이 fckeditor.html 파일을 찾을수 없다는 메시지가 뜹니다.
\editor\FCKeditor\_samples\jsp\sample01.jsp 내용을 보면
oFCKeditor.setBasePath( "/FCKeditor/" ) ;
위와 같은 부분이 있습니다.
컨텍스트의 루트 폴더가 FCKeditor 이라면 에러 없이 수행되었겠지만
루트가 editor 폴더로 지정되어 있으므로
oFCKeditor.setBasePath( "/editor/FCKeditor/" ) ;
위처럼 수정해주면 제대로 수행되는 것을 확인할수 있습니다.
7-3. 이미지 버튼을 눌러서 서버보기를 눌러보지만 4. 처럼 스크립트 오류가 발생합니다.
8. sample02.jsp 의 태그 라이브러리를 이용한 파일 브라우저 경로 수정
8-1. \editor\FCKeditor\_samples\jsp\sample02.jsp 를 보면 7. 처럼 fckeditor.html 을 찾을수 없다는 메시지가 뜹니다.
<FCK:editor id="EditorDefault" basePath="/FCKeditor/"
위 부분에서 basePath 를 현재 테스트 경로에 맞게끔
<FCK:editor id="EditorDefault" basePath="/editor/FCKeditor/" 로 수정 후 sample02.jsp 를 수정하면
에디터는 잘 나오나 역시 이미지 뷰어나 업로드 부분은 작동하지 않습니다.
sample02.jsp 에선 다음과 같이 브라우저 URL 과 업로드 URL 을 정의한 부분을 볼수 있습니다.
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"
editor 폴더 하위에 FCKeditor 폴더가 위치한 구조이니 /FCKeditor/editor... 부분 앞에
/editor/FCKeditor/editor... 형식으로 수정하고,
web.xml 의
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
위 url-pattern 경로대로 Connector 부분과 UploadURL 을 현재 경로를 예를 들어 재구성하자면
다음과 같이 수정하여 sample02.jsp 을 작성하면 됩니다.
imageBrowserURL="/editor/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/editor/editor/filemanager/browser/default/connectors/jsp/connector"
linkBrowserURL="/editor/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=/editor/editor/filemanager/browser/default/connectors/jsp/connector"
flashBrowserURL="/editor/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=/editor/editor/filemanager/browser/default/connectors/jsp/connector"
imageUploadURL="/editor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/editor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/editor/editor/filemanager/upload/simpleuploader?Type=Flash"
위 URL은 web.xml 의 url-pattern 과 매핑된다는 점을 이해하셔야 합니다.
이런 특징을 통하여 경로를 판별할수 있습니다.
8-2. 이미지링크,플래쉬 브라우저 및 업로드가 제대로 동작하지 않을 경우...
8-2-1. browser.html 파일의 경로가 틀렸을 경우
basePath 만 수정한 후 위 8-1. 에서처럼 경로를 수정하지 않을 경우
다음과 같은 화면을 볼수 있습니다.
8-2-2. Connector 부분의 경로가 틀릴 경우
Connector 의 경로는 수정하지 않은채 browser.html 의 경로만 옳바르게 설정할 경우
다음과 같은 화면을 볼수 있습니다.
* Connector 의 경로는 web.xml 의 Connector 의 url-pattern 과 관련이 되어있습니다.
8-1. 에서 보신 web.xml 처럼 /editor/filemanager/browser/default/connectors/jsp/connector 으로
지정되어 있따면 Connector 의 주소는
http://서버url/컨텍스트명/editor/filemanager/browser/default/connectors/jsp/connector 이 됩니다.
위 화면처럼 파일을 찾을수 없다는 화면이 아닌 다른 화면이 나오게 되면 맞는 경로이므로
Connector 부분은 http://서버url/ 을 제외한 나머지 주소를 기술하면 됩니다.
( 8-1. 의 Connector 주소 설정 참조 )
* 옳바른 주소 설정에도 불구하고 위 화면에서처럼 Connector 을 브라우저에서 실행했을 때
다른 에러가 발생한다면 XML 을 생성하는 xalan 콤포넌트가 존재하는지 의심해봐야 합니다.
왜 에러가 발생하는지 보기 위한 테스트URL)
http://서버url/컨텍스트명/editor/filemanager/browser/default/connectors/jsp/connector?Command=GetFoldersAndFiles&Type=Image&CurrentPath=/
위 화면에서처럼
javax.xml.transform.TransformerFactoryConfigurationError: Provider org.apache.xalan.processor.TransformerFactoryImpl not found
에러가 발생한다면 Xerces-J-tools의 xalan.jar 를(http://www.apache.org/dist/xml/xerces-j/)
찾아 다운로드 하여 \WEB-INF\lib 폴더에 넣은 후 톰캣 재가동후 새로운 브라우저에서
테스트 URL 을 확인해보면 다음과 같이 에러 없이 XML 화면이 나오는 것을 확인할수 있습니다.
8-2-3. 업로드 URL 의 확인
Connector 와 마찬가지로 web.xml 의 SimpleUploader 의 url-pattern 의 영향을 받습니다.
위 web.xml 에선 url-pattern 이 /editor/filemanager/upload/simpleuploader 이므로
테스트 URL)
http://서버url/컨텍스트명/editor/filemanager/upload/simpleuploader 을 쳤을 경우 다음과 같은 화면이 나와야 정상입니다.
위 결과대로 나온다면 image,link,flash UploadUrl 을 설정하면 됩니다.( 8-1. 의 각 UploadUrl 확인 )
9. 테스트
이미지를 업로드하고, 목록에 정상적으로 출력된다면 모든 설치가 성공적으로 완료된 것입니다.
10. 샘플이 아닌 기존 체계에 fckeditor 를 적용할 경우.
태그 라이브러리 사용을 위한
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %> 를 페이지 상단에 삽입 하고,
<TEXTAREA></TEXTAREA> 부분에 sample02.jsp 의 <FCK:editor ~ </FCK:editor> 부분을 복사하여 붙여넣기 합니다.
기본 sample02.jsp 에는 <FCK:editor id="EditorDefault" 처럼 id 가 EditorDefault 로 되어있는데
만약 <TEXTAREA name = "contents" 와 같이 name 이 contents 였다면
<FCK:editor id="contents" 로 지정하면 받는 부분에서 contents 로 받을 수 있습니다.
예)
- \editor\board\create_form.jsp(UTF-8 로 작성)
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
<%@ page contentType = "text/html;charset=utf-8" %>
<HTML>
<HEAD>
<TITLE>글 입력 폼</TITLE>
<META http-equiv = "Content-Type" content = "text/html;charset=utf-8" />
<SCRIPT>
function send()
{
create_form.submit();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name = "create_form" method = "post" action = "./create.jsp">
<FCK:editor id="contents" basePath="/editor/FCKeditor/"
imageBrowserURL="/editor/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/editor/editor/filemanager/browser/default/connectors/jsp/connector"
linkBrowserURL="/editor/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=/editor/editor/filemanager/browser/default/connectors/jsp/connector"
flashBrowserURL="/editor/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=/editor/editor/filemanager/browser/default/connectors/jsp/connector"
imageUploadURL="/editor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/editor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/editor/editor/filemanager/upload/simpleuploader?Type=Flash">
This is some <strong>sample text</strong>. You are using <a href="http://www.fredck.com/fckeditor/">FCKeditor</a>.
</FCK:editor>
</FORM>
<INPUT type = "button" onClick = "return send()" value = "전송">
</BODY>
</HTML>
- \editor\board\create.jsp(UTF-8 로 작성)
<%@ page contentType = "text/html;charset=utf-8" %>
<%
String contents = request.getParameter("contents");
contents = new String(contents.getBytes("8859_1"), "UTF-8");
%>
<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv = "Content-Type" content = "text/html;charset=utf-8" />
</HEAD>
<BODY>
<%= contents %>
</BODY>
</HTML>
11. 몇가지 Tip.
11-1. 공백 값 입력을 방지하기 위해선 스크립트를 다음과 같이 수정합니다.
/**
* 데이터 전송전 체크
*/
function send()
{
var oEditor = FCKeditorAPI.GetInstance('contents') ;
var div = document.createElement("DIV");
div.innerHTML = oEditor.GetXHTML();
if( isNull( div.innerText ) )
{
alert("내용을 입력하세요.");
oEditor.Focus();
return false;
}
create_form.submit();
}
/**
* 정규표현식을 이용한 공백 체크
*/
function isNull( text )
{
if( text == null ) return true;
var result = text.replace(/(^\s*)|(\s*$)/g, "");
if( result )
return false;
else
return true;
}
11-2. 페이지 로딩시 바로 포커스를 주고 싶다면
\editor\FCKeditor\fckconfig.js 의 FCKConfig.StartupFocus 의 값을 true 로 변경하거나
태그라이브러리 옵션으로 startupFocus="true" 를 설정합니다.
11-3. 읽기 전용으로 변환하고 싶다면
var oEditor = FCKeditorAPI.GetInstance('contents') ;
oEditor.EditorDocument.body.contentEditable = false;
oEditor.EditorDocument.body.unselectable = true;
11-4. 기타 환경 설정은 fckconfig.js 파일을 참조하고 아래 사이트를 참조하시기 바랍니다.
http://sourceforge.net/forum/forum.php?forum_id=257180 ( fckeditor help 포럼 )
http://java.lin4u.com/my/index.php?category=&keyfield=title&keyword=fck&favorite ( 폰트 관련 참조 )
http://wiki.fckeditor.net/ ( fckeditor 위키 사이트 )
http://www.ghlab.com/blog/fckeditor/editor.zip ( 위 샘플들을 테스트한 컨텍스트 모든 파일들 )
