BLOG main image
Purple Rain's Secret Strory

FCKeditor

2008.05.16 10:43

 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를 생성한다.

fckeditor_01.JPG

Dynamic Web Project 를 선택한 후 Next 버튼을 클릭한다.


다음과 같이 Project Name을 fck_editor로 입력하고

Target Runtime에 New 버튼을 클릭한다.

fckeditor_03.JPG


다음과 같이 서버 새로운 서버 런타임을 등록하기 위한 창이 열린다.

Apache > Apache Tomcat v5.5를  선택한 후 Next 버튼을 클릭한다.

fckeditor_04.JPG 


이름은 적당히 입력하고, Tomcat installation directory에 실제 톰켓이 설치된 디렉토리를 선택한다.

JRE는 1.5 버전이상으로 선택한후 Finish 버튼을 클릭한다.

 fckeditor_05.JPG


 다음과 같이 Target Runtime 정보가 설정되고 Default Configuration for Apache Tomcat v5.5를 선택한 후 Finish 버튼을 클릭한다.

 fckeditor_02.JPG


 다음과 같이 Java Perspective의 Package Explorer에서 생성한 Dynamic Web Project를 확인할 수 있다.

fckeditor_06.JPG 


프로젝트의 팝업 메뉴에서 Properties를 선택하여 Java Build Path를 선택한 후, Source 폴더를 src에서 src/java로 변경한다.

 fckeditor_08.JPG


이제 아까 다운 받은 FCKeditor 관련 파일들을 이용하여 실제로 동작하게 만들어보자.

먼저 1번 파일의 압축을 풀면 '압축을 푼 디렉토리\FCKeditor_2.3.1\FCKeditor'이 생기는데

FCKeditor 폴더에 들어가서 하위 폴더와 파일들을 위에서 생성한 Dynamic Web Project의  WebContent 폴더로 복사한다.

대충 다음과 같이 폴더가 구성될 것이다.

fckeditor_07.JPG 


다음은 2번째 파일의 압축을 푼후 '압축을 푼 디렉토리'\FCKeditor-2.3\web의 _samples와 WEB-INF폴더를

위의 WebContent 폴더로 복사한다. 그리고 '압축을 푼 디렉토리'\FCKeditor-2.3의 src 폴더를 fck_editor의 src/java 폴더로 복사한다.

 fckeditor_09.JPG


이클립스에 런타임 서버를 등록해 보자.

fckeditor_10.JPG 

Server 를 선택한 후 Next 버튼을 클릭한다.


Server runtime에 아까 생성한 서버(ApacheTomcat v5.5)를 선택한 후 Next 버튼을 클릭한다.

fckeditor_11.JPG 


fck_editor를 Configured Projects로 추가한 후 Finish 버튼을 클릭한다.

fckeditor_12.JPG 

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를 입력한다.

이미지를 업로드하면 정상적으로 작동할것이다..


신고
Posted by 화무결

4월 프렌드쉽~

2007.05.03 10:30
사용자 삽입 이미지
ㅁㄴㅇㄹ
신고
Posted by 화무결

점심 시간 잠시 짬을 내서 양재 시민의 숲을 다녀왔다.

윤서비형과 승민이형, 태휘, 째민 그리고 나...

시그마 30.4(일명 삼식이)를 사고 너무 기분이 좋아서 막 찍어버렸다.

사용자 삽입 이미지

진달래


사용자 삽입 이미지

작은 돌담


사용자 삽입 이미지

의자

보너스 샷
(윤서비형 렌즈 살때 도와주셔서 넘 고마워용~^^)

사용자 삽입 이미지

신고
Posted by 화무결
RIA(Rich Internet Application) 중에 하나인 Flex에 대한 관심이 높아지고 있는데,

그에 반해 Flex 개발자는 부족하다는 이야기를 자주 들었다.

얼마전 회사에 Adobe사 관련 분들이 오셔서 Flex 설명회를 가졌는데,

Web Agency 회사 중에서 Flex로 프로젝트를 진행하는 회사는 몇군데 되지 않는다고 한다.

html과 css를 가장 어려워하는 나에게는 딱인거 같은데 일단 세용군도 관심이 있다고해서

같이 스터디를 시작하기로 했다.

간단하게 Flex Builder를 사용해 프로젝트를 만들고 관련된 기능들을 알아보겠다.

먼저 플렉스 빌더가 준비되어 있어야 하는데 플렉스 빌드는 한달짜리 트라이얼 버전이 있다.

플렉스를 설치할때 기존 이클립스에 플러그인 형태로도 추가가 가능한데,

Adobe에서 어떻게 이클립스를 활용했는지 궁금해서 그냥 전체 설치를 해버렸다...

그럼 이제 FirstFlex라는 프로젝트를 하나 생성해 보도록 하자.

1. 좌측 상단의 [File] 메뉴를 선택한 후 [New] 메뉴를 클릭한다.
사용자 삽입 이미지
2. [Flex Project]를 선택한다.
사용자 삽입 이미지

3. 데이터 접근 방식은 [Basic]을 선택한 후 [다음] 버튼을 클릭한다.
사용자 삽입 이미지

4. 실제 Flex 프로젝트가 생성될 폴더를 선택하는 대화창이 열린다. [Use Default Locator] 옵션을 풀고 'C:\Flex' 폴더를 생성한 후 해당 폴더를 프로젝트 폴더로 지정하였다.
사용자 삽입 이미지

5. 메인 소스 폴더에 'src'를 입력한 후 [Finish] 버튼을 클릭한다.
사용자 삽입 이미지

6. 화면 좌측의 [Navigator] 뷰에 다음과 같이 'FirstFlex'라는 프로젝트가 생성된 것을 확인할 수 있다. 'src'폴더 밑에 'FirstFlex.mxml' 파일이 보이는 파일앞에 아이콘을 유심히 보면 동그라미가 그려져 있는 것을 확인할 수 있는데 디폴트로 설정된 애플리케이션을 나타낸다.
사용자 삽입 이미지

7. 네비게이터에서 'FirstFlex.mxml' 파일을 더블 클릭한 후 디자인 에디터를 선택한다. 버튼을 하나 추가하고 'Ctrl+S' 버튼을 클릭하여 저장한다.
사용자 삽입 이미지

8. 로컬 파일의 변동 사항을 확인하기 위해 'FirstFlex.mxml' 파일을 선택한 후 오른쪽 마우스 버튼을 클릭하며 'Compare With'의 'Local History'를 선택한다. 다음과 같이 변경된 내역을 확인할 수 있다.
사용자 삽입 이미지

9. Flex는 Code 에디터와 Design 에디터를 지원한다. 다음은 Code 모드이다.
사용자 삽입 이미지

10. 다음은 Design 모드이다.
사용자 삽입 이미지

이클립스를 사용해 본 적이 많은 사람들에게는 아무 도움이 안되겠지만...

Flex는 개발자만의 툴은 아니라고 생각한다.

쉽게 쉽게 ㄱㄱ 싱~
신고
Posted by 화무결

엠티가 끝나고 오랜간만에 모인 자리~

서울지부 운영진 미정양, 작년에 이어 올해도 수고해 주고 있는 여나

둠직한 우리의 지원자 쎄용군..

그리고 오늘 회의에 참석해 주신 자바카페 서울지부 12기 분들 모두 반갑습니다 ㅎㅎ

사용자 삽입 이미지

신촌 토즈에서...

신고
Posted by 화무결
훗... 축구하고 담날 하루종일 누어 있었삼...

용병분들이 없었으면 -_-;;; 생각하기도 시름.

사용자 삽입 이미지

경기 시작 전

신고
Posted by 화무결

카테고리

분류 전체보기 (6)
PST (1)
Flex (1)
JavaCafe (1)
DDO (0)
SpringFramework (0)
Tips (1)
TechNews (0)
Gallary (1)

최근에 받은 트랙백

달력

«   2017/06   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

티스토리 툴바