★ php substr ★ 최고킹카의 나날들 - fck 에디터 설치 및 사용방법

FCK editor를 써볼 기회가 생겼습니다.

 

예전에 잠깐 본적은 있지만 혼자서 붙이고 수정하고 하는건 처음이라서 저와 같은 분들을 위해 이것 저것 써놓도록 하겠습니다.

 

자~ 처음에는 당연히 FCKditor를 받아야겠지욤??

 

다운 받는 사이트는 http://sourceforge.net/projects/fckeditor/files 욜로 가십니다.

 

가시면 하단 부분에 최신파일들이 등록된것을 알수있습니다.

 

항상 최신이 좋은건 아니지만 그래도 버그들이 하나 둘씩 수정되서 나왔겠지욤 ^^;

 

 

 

 

저는 FCKeditor_2.6.4.1.zip 을 받고  그 아래 FCKeditor.java에가서 fckeditor-java-2.4.2-src.zip 을 받았습니다.

 

이제 총알을 다운 받았으니 eclipse에서 DynamicWeb Project를 하나 만들어 봅시다.

 

참고로 저는

 

eclipse = eclipse-jee-ganymede-SR2-win32

JDK = jdk1.5.0_17

tomcat = 5.5

 

를 사용하고있습니다.

 

이클립스 왼쪽에 보시면 Project Explorer 안에서 우클릭 New -> Other 을 눌르시면 아래 처럼 저놈이 뜹니다.

 

 

 

Dynamic Web Project 를 선택 후 Next를 눌러주시면 아래 처럼 화면이 뜹니다.

 

 

 

여기서 본인이 원하는 Project name 을 써주시고 Target Runtime, version, Configuration 을 잡아주세요.

지금은 FCK editor를 설명중이니 위 쎄팅은 넘어가겠습니다.

 

Project name를 써주신후 넥스트 ~ 

 

 

 

 

Java Source Directory 를 src에서 java로 변경 후 Finish 클릭~ 하시면 아래처럼 프로젝트가 생성됩니다.

 

 

 

 

자 그럼 이제 부터 받을 총알들을 끼워 넣을 차례입니다.

 

FCKeditor_2.6.4.1.zip 파일의 압축을 풀면 fckeditor라는 폴더를 복사해서  WebContent 아래에 복사합니다

여기서 폴더를 직접열어서 붙이는 방법과 이클립스에서 바로 붙이는 방법 편안한대로 하시면 됩니다~

 

저는 윈도키+e 버튼을 눌러 해당 프로젝트를 차자가는 불편보다는 바로 이클립스에서 복사한것을 붙였습니다.

 

그럼 아래처럼 생기겠지욤?

 

 

 

여기서 끝이 아닙니다.

 

이젠 fckeditor-java-2.4.2-src.zip 압축을 푸시면 docs, src, web 폴더가 보이실겁니다.

 

web -> _samples 을 복사하신 후 fckeditor에 엎어 치시고, web->WEB-INF도 복사하신 후 WebContent에 엎어 치십니다.

 

그럼 아래 화면처럼 _samples에 jsp가 추가 되며, WEB-INF lib폴더에 commons-fileupload.jar, FCKeditor-2.3.jar가 추가 되며,

web.xml이 바뀝니다.

 

여기서 저는 fckeditor폴더를 통채로 복사했기에 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>

 

이부분을

 

<servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
  </servlet-mapping>
 
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>
  </servlet-mapping>

 

요렇게 수정해야겠지욤!!!

 

여기서 현재 프로젝트가 진행중이시면 web.xml에 필요한 부분만 카피해서 쓰시길 바랍니다 ^^ 

 

 

 

 

 

자 이제 직접 사용하기 위해서 몇가지 소스를 고쳐 보겠습니다.

 

WebContent\fckeditor\fckconfig.js 파일을 열고

 

1. FCKConfig.DefaultLanguage  = 'en' ; ->  FCKConfig.DefaultLanguage  = 'kr' ;

    로 수정 해주세요!!!

 

2. var _FileBrowserLanguage = 'jsp' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'jsp' ; // asp | aspx | cfm | lasso | php

    로 수정해주세요!!!

 

3. 2번 하단에

    var _FileBrowserExtension = _FileBrowserLanguage == 'perl' ? 'cgi' : _FileBrowserLanguage ;
    var _QuickUploadExtension = _QuickUploadLanguage == 'perl' ? 'cgi' : _QuickUploadLanguage ;

    var _ConnectorServletName = '/Fckeditor/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector';
    var _SimUploadServletName = '/Fckeditor/fckeditor/editor/filemanager/upload/simpleuploader';

    를 추가해 주세요!!!

 

4. 3번 하단에

 

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.LinkBrowserWindowWidth = FCKConfig.ScreenWidth * 0.7 ;  // 70%
FCKConfig.LinkBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;
FCKConfig.LinkUploadAllowedExtensions = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ;   // empty for all
FCKConfig.LinkUploadDeniedExtensions = "" ; // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ;  // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ;       // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|flv)$" ;  // empty for all
FCKConfig.FlashUploadDeniedExtensions = "" ;     // empty for no one

 

요놈들을

 

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + _ConnectorServletName ;
FCKConfig.LinkBrowserWindowWidth = FCKConfig.ScreenWidth * 0.7 ;  // 70%
FCKConfig.LinkBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + _ConnectorServletName ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + _ConnectorServletName ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = _SimUploadServletName ;
FCKConfig.LinkUploadAllowedExtensions = "" ;   // empty for all
FCKConfig.LinkUploadDeniedExtensions = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ; // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = _SimUploadServletName + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png)$" ;  // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ;       // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = _SimUploadServletName + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla)$" ;  // empty for all
FCKConfig.FlashUploadDeniedExtensions = "" ;     // empty for no one

 

요렇게 변경 합니다 ~

요기까지만 설정하셔도 FCKeditor가 구동 되실겁니다.

 

다음은 다운로드시 한글깨짐 현상때문에 설정하는 것입니다.

 

WebContent\fckeditor\editor\dialog\fck_image\fck_image.js을 여시면 Ok()함수를 찾아서 아래 소스를 제일 상단에 추가해주세요!!!

 

var imgUrl = GetE('txtUrl').value;
var idx = imgUrl.lastIndexOf("/") + 1;
imgUrl = imgUrl.substring( 0, idx ) + encodeURIComponent( imgUrl.substring( idx, imgUrl.length ) );
GetE('txtUrl').value = imgUrl;

 

Ok()함수를 수정하셨으면 그위에있는 LoadSelection()을 찾으셔서

 

GetE('txtUrl').value    = sUrl ; 요놈을 GetE('txtUrl').value    = decodeURIComponent( sUrl ) ; 요렇게 바까 주십니다~

 

그럼 테스트 페이지를 만들어서 함 돌려볼까욤??

 

WebContent 아래

 

wirte.jsp

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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="/fck_editor/FCKeditor/fckeditor.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
 window.onload = function() {
         var oFCKeditor = new FCKeditor( 'memo' ) ;
         oFCKeditor.BasePath =  "/fck_editor/FCKeditor/";
         oFCKeditor.Width = 800;
         oFCKeditor.Height = 250 ;
         oFCKeditor.ReplaceTextarea() ;
    }
</script>
<form action="view.jsp" method="post">
<textarea name="memo" class="input1" style="width:800px; height:250px;"></textarea>
<input type="submit" value="글쓰기">
</form>
</body>
</html>

 

======================================================================================================================

view.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>출력 페이지</title>
</head>
<body>
<table border=1>
<tr>
 <td>글내용</td>
</tr>
<tr>
 <td>
 <%= request.getParameter("memo")%>
 </td>
</tr>

</table>
</body>
</html>

 

wirte.jsp를 구동시키면