FCKeditor는 오픈 소스로서 웹 환경에서 html편집 기능을 제공 합니다...
1. 톰캣 환경에서 내가 만든 웹프로젝트 안에 FCKedit라는 폴더를 만듭니다.
2. fckeditor 다운로드
2-1. http://www.fckeditor.net/download/ 에서 다운로드
2-2. FCKedit 폴더에 다운로드 된 압축 파일의 압축을 풉니다.
위의 URL에서 다운받은 것을 사용 하시면 추려낼것들이 좀 많습니다...
하지만 추려 내지 않고 돌려도 잘 돌아 갑니다...
3. java 버전용 fckeditor 를 다운로드(FCKeditor-2.3.zip)
3-1. http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511 에서 다운로드합니다..
다운로드 하였다면 압축을 풀고 , 하나 하나 옴겨 보죠...^^
3-2. 먼저 FCKeditor-2.3 의 web/WEB-INF/web.xml을 열어서 톰켓 환경의 web.xml에 추가합니다.
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
......<중간 생략>......
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/simpleuploader</url-pattern>
</servlet-mapping>
3-3. 그리고 나서는 FCKeditor-2.3 /web/WEB-INF/lib에있는 commons-fileupload.jar파일을
프로젝트의 WEB-INF/lib안에 복사 하고 빌드패스에 추가 하여 줍니다.
3-4. FCKeditor-2.3/src의 com폴더를 WEB-INF/src에 복사 합니다..
이렇게 하면 기본적인 jsp에서 사용할수 있는 FCKeditor를 셋팅 됩니다.
기본 셋팅을 했으니까 jsp페이지를 만들어 보죠...
4-1. jsp페이지를 testfck.jsp로 만들도록 하겠습니다...
페이지에서는
<%@ page language="java" contentType="text/html;charset=euc-kr"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<html>
<head>
<title>FCKeditor</title>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="/js/message.js" type="text/javascript"></script>
<script type="text/javascript" src="/FCKedit/fckeditor.js"></script>
</head>
<script LANGUAGE="JavaScript"><!--
/**
* doInit()
* 개 요 : 화면 로딩시 실행, 일반 textarea를 editor가 포함된 형태로 변형
* return값 : void
*/
function doInit() {
var sBasePath = "/FCKedit/";
oFCKeditor = new FCKeditor( 'FCKeditor' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.ReplaceTextarea();
}
--></script>
<body style="background-color:transparent" onload="doInit();" oncontextmenu="return false" >
<form id=MsgForm name=MsgForm method="post" style="width:100%;height:450;" target="myhiddenFrame">
<table id=totalTable width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="100%">
<td class="td_C5" valign="top" height="100%">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="100%">
<td height="100%" id=MSG>
<textarea id='FCKeditor' name='FCKeditor' style='width:100%;height:100%;'>
<c:forEach items="${sessionScope.HelpMsg}" var="it">
<c:out value="${it.hlp_msg}"/>
</c:forEach>
</textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</html>
이렇게 구성 하면 jsp페이지 에서 FCKeditor를 볼수 있습니다...
설명을 한다고 했는데 ,, 잘 이해가 되실지 모르겠습니다.....
이글에 대한 궁금한점 리플 달아 주시면 성심 성의껏 답변 해드리겠습니다..
다음 글에서는 FCKeditor의 이미지 업로드에 관한 강좌를 올리도록 하겠습니다...
| jsp에서 FCKeditor 사용하기 - 2 FCKeditor에대한 두번째 강좌 이네요..^^ 이번 강좌는 편집 문서에 이미지를 넣기 위한 과정으로 좀 까다롭더군요..^^ 이거 때문에 고생좀 했습니다..^^ 이글을 보시고 FCKeditor를 사용하시는 분들은 고생을 덜하셨으면 합니다..^^ 첯 강좌에 commons-fileupload.jar를 lib에 추가 하고, src에 com패키지를 추가 한것을 기억 하실 껍니다.. 이 두녀석이 서버의 특정 루트에 파일을 업로드 하게끔 해주는 녀석 입니다..^^ 그냥 디폴트로 사용한다면 컨텍스트 아래에 UserFile이라는 이름으로 폴더가 생성 됩니다.. 업로드 제한 사이즈 또한 디폴트 용량이 1M안쪽인것 같습니다.... 실제 디폴트 용량이 얼마 인지는 저두 확실히 파악하지는 못했습니다.... 암튼 수정을 가하지 않고 쓸려니 파일 용량에서 걸리더군요..^^ com패키지 안을 열어 보시면 ConnectorServlet.java파일이 있습니다.. 이녀석이 이미지를 업로드 할때 FCKeditor의 frmupload.html에서 녀석을 불러들이고, ConnectorServlet.java파일 에서는 commons-fileupload.jar파일에 들어 있는 FileItem클래스를 이용하여 파일을 업로드 하게 됩니다.. **** 주의 **** 파일 업로드시 현재 자신이 사용하고 잇는 인코딩 방식을 잘 채크 하고 잇어야 합니다.. 사용하는 인토딩 방식에 따라 한글파일 일 경우 파일명이 깨지는 현상이 발생 하기 때문입니다. **************************************************************************************** ConnectorServlet.java파일에는 몇개의 함수가 존재 하는데.. 함수에 대해 잠시 알아 보죠.. init(); 서블릿이 구동될때 실행 됩니다. web.xml에서 폴더명을 가지고 와서 컨택스트폴더 아래에 파일이 업로드될 폴더를 만듭니다. web.xml에서 폴더명을 얻지 못하였다면 디폴트로 정의된 UserFile이라는 폴더를 생성 합니다. doGet(HttpServletRequest request, HttpServletResponse response); UserFile폴더에 들어 잇는 파일명을 읽어 옵니다.. 이미지 설정 다이얼로그에서 서버 보기버튼을 누를 때 (browser.html)이 실행되면서 호출 됩니다. 한글 파일의 경우 인코딩 주의 doPost(HttpServletRequest request, HttpServletResponse response); FCKeditor에서 서버에 전송할때 실제 업로드를 하는 함수 입니다. 이 함수에서 파일 업로드 최대 사이즈 업로드 버퍼 용량등을 조절 가능 합니다. frmupload.html에서 파일을 선택후 업로드 버튼을 누를때 실행 됩니다. 한글파일의경우 인코딩 주의 getFolders(File dir,Node root,Document doc); 폴더명을 읽어 옵니다. getFiles(File dir,Node root,Document doc); 파일명을 읽어옵니다. web.xml을 수정 하고 나면 컨텍스트에 맞게끔 경로 수정이 필요 합니다... fckconfig.js에서 파일 업로드 경로를 설정 할수있습니다.. 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 을 현재 경로를 재구성해도 되지만 경로를 저리 길게 잡을 필요는 없어서 저는 아래와 같이 xml을 수정 하였습니다 <servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern>/connector</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern>/simpleuploader</url-pattern> </servlet-mapping> 그리고는 fckconfig.js에서 url설정 부분을 아래와 같이 변경 합니다... FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=/danpum/connector' ; FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=/danpum/connector' ; FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=/danpum/connector' ; FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'simpleuploader?Type=File' ; FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'simpleuploader?Type=Image' ; FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'simpleuploader?Type=Flash'; 그러면 이미지 업로드 설정은 끝이 납니다,....^^ 위와 같이 설정 하면, UserFile이라는 폴더가 컨택스트 폴더 아래에 생성 되고 , UserFile/image라는 폴더가 생성 되어 image폴더 안에 파일을 업로드 할수 있습니다. 설치방법 2 [원문]http://pskppoppo.egloos.com/2771426 현재 개발환경은 eclipse 3.5, jdk 1.6, Tomcat 6.0 버전대이다. <servlet> <servlet-mapping> |
