HTML 편집기하면 뭐가 가장 먼저 떠오르는가?
공개용이면서도 다양한 Server-Side Script 언어를 지원하는 FCKeditor를 한번씩은 들어봤을 것이다.
생군도 여러가지 프로젝트를 진행하면서 사용한 editor가 있는데,
좀더 강력한 성능을 제공하는 FCKeditor를 알아보기로 하자.
생군이 쓰던 editor는 다음 기회에 소개하겠다.
생군은 자바 specific한 개발자이므로 자바 중심으로 소개를 하겠다.
그래봤짜 차이나는 부분은 파일 업로드가 서블릿으로 구현된 정도이다.
역시 첫걸음은 FCKeditor 설치부터 시작된다.
다운로드할 파일은 2개 인데, 하나는 실제 HTML 편집기 기능을 제공하는 파일들을 압축한 것이고
다른 하나는 자바 환경에서 파일 업로드 기능을 구현하기 위한 파일들을 압축한 것이다.
아차! 준비물을 빠드렸군.
먼저 준비물 부터 소개하면 일단 jdk 1.5 이상이 설치되어 있어야 하며, tomcat 5 이상이 깔려 있어야 한다.
이클립스 IDE를 사용하여 세팅을 하였으며, 실제 프로젝은 dynamic web으로 개발하고 빌더는 ant를 사용하였다.
참고로 이클립스에서 tomcat 서버를 연동하기 위해서 톰캣 드라이버가 포함된 플러그인을 추가하였다.
다시 다운로드로 돌아가서 해당 파일들의 경로는 다음과 같다.
1번 파일 http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.3.1.zip?download
2번 파일 http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511
위 2개의 파일을 다운받아서 압축을 푼다.
이클립스를 실행한 후 새로운 DynamicWeb Project를 생성한다.
Dynamic Web Project 를 선택한 후 Next 버튼을 클릭한다.
다음과 같이 Project Name을 fck_editor로 입력하고
Target Runtime에 New 버튼을 클릭한다.
다음과 같이 서버 새로운 서버 런타임을 등록하기 위한 창이 열린다.
Apache > Apache Tomcat v5.5를 선택한 후 Next 버튼을 클릭한다.
이름은 적당히 입력하고, Tomcat installation directory에 실제 톰켓이 설치된 디렉토리를 선택한다.
JRE는 1.5 버전이상으로 선택한후 Finish 버튼을 클릭한다.
다음과 같이 Target Runtime 정보가 설정되고 Default Configuration for Apache Tomcat v5.5를 선택한 후 Finish 버튼을 클릭한다.
다음과 같이 Java Perspective의 Package Explorer에서 생성한 Dynamic Web Project를 확인할 수 있다.
프로젝트의 팝업 메뉴에서 Properties를 선택하여 Java Build Path를 선택한 후, Source 폴더를 src에서 src/java로 변경한다.
이제 아까 다운 받은 FCKeditor 관련 파일들을 이용하여 실제로 동작하게 만들어보자.
먼저 1번 파일의 압축을 풀면 '압축을 푼 디렉토리\FCKeditor_2.3.1\FCKeditor'이 생기는데
FCKeditor 폴더에 들어가서 하위 폴더와 파일들을 위에서 생성한 Dynamic Web Project의 WebContent 폴더로 복사한다.
대충 다음과 같이 폴더가 구성될 것이다.
다음은 2번째 파일의 압축을 푼후 '압축을 푼 디렉토리'\FCKeditor-2.3\web의 _samples와 WEB-INF폴더를
위의 WebContent 폴더로 복사한다. 그리고 '압축을 푼 디렉토리'\FCKeditor-2.3의 src 폴더를 fck_editor의 src/java 폴더로 복사한다.
이클립스에 런타임 서버를 등록해 보자.
Server 를 선택한 후 Next 버튼을 클릭한다.
Server runtime에 아까 생성한 서버(ApacheTomcat v5.5)를 선택한 후 Next 버튼을 클릭한다.
fck_editor를 Configured Projects로 추가한 후 Finish 버튼을 클릭한다.
Window > Show View > Server > Servers를 추가하면 새로 생성한 서버가 Server 뷰에 표시된다.
생성한 서버를 선택한 후 팝업 메뉴를 통해 Start를 하면 톰캣 서버가 시작된다. 끄는건 Stop으로...
UTF-8을 사용하므로 server.xml 파일의 Connector를 수정해 준다.
uRIEncoding="UTF-8"를 <Connector> 노드에 애트리뷰트로 추가한다.
에디터가 제대로 동작하기 위해서는 몇가지 수정이 필요하다.
WebContent\fckconfig.js 파일을 연다.
var _FileBrowserLanguage = 'jsp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'jsp' ; // asp | aspx | cfm | lasso | php
밑에 다음의 변수를 추가하고
var _ConnectorServletName = '/fck_editor/editor/filemanager/browser/default/connectors/jsp/connector';
var _SimUploadServletName = '/fck_editor/editor/filemanager/upload/simpleuploader';
다음의 소스를 수정한다.
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=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=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=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/upload/' + _QuickUploadLanguage + '/upload.' + _QuickUploadLanguage ;
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 = FCKConfig.BasePath + 'filemanager/upload/' + _QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png)$" ; // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ; // empty for no one
FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/' + _QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla)$" ; // 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
위와 같이 수정한다.
WebContent\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;
LoadSelection() 함수의 GetE('txtUrl').value = sUrl ;를 GetE('txtUrl').value = decodeURIComponent( sUrl ) ;로 수정한다.
WebContent\_samples\jsp\sample01.jsp에서 oFCKeditor.setBasePath( "/FCKeditor/" ) ;를
oFCKeditor.setBasePath( "/fck_editor/" ) ; 로 수정한다.
WebContent\_samples\jsp\sample02.jsp에서
<FCK:editor id="EditorDefault" basePath="/FCKeditor/"
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">
This is some <strong>sample text</strong>. You are using <a href="http://www.fredck.com/fckeditor/">FCKeditor</a>.를 다음과 같이 수정한다.
<FCK:editor id="EditorDefault" basePath="/FCKeditor/"
imageBrowserURL="/fck_editor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fck_editor/editor/filemanager/browser/default/connectors/jsp/connector"
linkBrowserURL="/fck_editor/editor/filemanager/browser/default/browser.html?Connector=/fck_editor/editor/filemanager/browser/default/connectors/jsp/connector"
flashBrowserURL="/fck_editor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=/fck_editor/editor/filemanager/browser/default/connectors/jsp/connector"
imageUploadURL="/fck_editor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/fck_editor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/fck_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>
이제 서버를 시작해 보자.
그리고 http://localhost:포트/fck_editor/_samples/index.jsp를 입력한다.
이미지를 업로드하면 정상적으로 작동할것이다..
이올린에 북마크하기
