FCKeditor 와 Java 연동하기

에디터는 웹코딩시 빼놓을수 없는 컴포넌트중의 하나이다.
오늘은 간단히 Java 에서 어떻게 FCKeditor를 사용할수 있는지를 보여주겠다.

사실 FCKeditor를 Java/JSP 웹 페이지에서 사용하는건 그리 어려운것이 아니다. 에전에 웹에디터를 만들려면 복잡한 자바스크립트렛 및 자바스크립트 API를 많이 사용하였었다. 하지만 FCKeditor를 사용함으로서 이런 복잡한 작업을 몽땅 없애버릴수 있다.

먼저 JSP 연동팩 최신버젼을 아래주소에서 다운로드 받는다.
http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511

단 주의할 점은 연동팩 설치전에 우선 FCKeditor 풀버젼을 다운로드 받아서 설치해야 한다.
FCKeditor .java 패키지는 FCKeditor 코아 부분을 포함하지 않고 있다.
FCKEditor CORE는 아래 주소에서 다운로드 받을수 있다.
http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845

설치

JSP 환경에서 FCKeditor의 설치는 상당히 쉽다.

• Java 연동 라이브러리를 FCKeditor라는 디렉토리 밑에 압축을 풀어놓는다.
• FCKeditor CORE 속 파일들을 선택적으로 FCKeditor\web 폴더속에 압축을 풀어놓는다.
• Tomcat이나 기타 WAS에서 새로운 컨텍스트를 만들고 FCKeditor를 가리키게 설정한다.
• 웹브라우저에 http://domainName.ext/FCKeditor/_samples/index.jsp 를 입력하여 샘플리스트들을 살펴본다.

사용법

우선 구체적인 사용법을 숙지하고픈 사용자들 한테는 javadoc API문서를 참고 하라고 권고 하고 싶다.아래에는 간단한 예제를 보여주겠다.

먼저 taglib 선언을 JSP 맨위에 해준다.

<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>

다음 FCKeditor를 넣고싶은 곳에 아래와 같이 FCK tag를 넣는다.

<FCK:editor
id="EditorAccessibility"        //Unique name of the editor
    width="80%"                 //Width
    height="120"                //Height
    toolbarSet="Accessibility"  //Toolbar name
>This is another test. <BR><B>The "Second" row.</B></FCK:editor>

아래는 좀 더 복잡한 예제를 보여준것이다. 이 예제에서는 config.js파일속의 이미 선언한 모든 세팅을 inner tags방식으로 오버라이딩 한것을 보여준다.

<FCK:editor id="EditorDefault" basePath="/FCKeditor/"
    styleNames=";Style 1;Style 2; Style 3"
    fontNames=";Arial;Courier New;Times New Roman;Verdana" >
    This is some <B>sample text</B>.
</FCK:editor>

파일 브라우저 컨넥터 설정

모든부분들이 정확히 작동하게 하기 위하여 아래코드들을 어플리케이션의 web.xml속에 추가해야 한다.

<servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
        <init-param>
                <param-name>baseDir</param-name>
                <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
                <param-name>debug</param-name>
                <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

또한 fckconfig.js에 아래와 같이 3라인을 추가한다. (기본적으로 세팅된것들을 삭제한다.)

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

또한 서블릿 매니저가 Jakarta Common fileupload 라이브러리를 사용하고 있기때문에 WEB-INF/lib/에 commons-fileupload.jar를 넣는다.

퀵 업로더 설정

모든부분들이 정확히 작동하게 하기 위하여 아래코드들을 어플리케이션의 web.xml속에 추가해야 한다.

<servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
        <init-param>
                <param-name>baseDir</param-name>
                <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
                <param-name>debug</param-name>
                <param-value>true</param-value>
        </init-param>
        <init-param>
                <param-name>enabled</param-name>
                <param-value>true</param-value>
        </init-param>
        <init-param>
                <param-name>AllowedExtensionsFile</param-name>
                <param-value></param-value>
        </init-param>
        <init-param>
                <param-name>DeniedExtensionsFile</param-name>
                <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
        </init-param>
        <init-param>
                <param-name>AllowedExtensionsImage</param-name>
                <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
                <param-name>DeniedExtensionsImage</param-name>
                <param-value></param-value>
        </init-param>
        <init-param>
                <param-name>AllowedExtensionsFlash</param-name>
                <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
                <param-name>DeniedExtensionsFlash</param-name>
                <param-value></param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>SimpleUploader</servlet-name>
  <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

AllowedExtensions*와 DeniedExtensions* 파라미터는 어떤 확장자를 퀵 업로드로 엑세스할건지를 설정한다. 여기서 유의할점은 두가지 설정 파라미터중 오로지 하나만이 값을 설정해줄수 있다는 것이다. 즉 AllowedExtensions*에 값을 설정해주면 DeniedExtensions*에는 값이 들어가서는 않된다.

또한 fckconfig.js파일에 아래와 같이 3라인 추가해주고 기본설정들은 삭제해준다.

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

또한 서블릿 매니저가 Jakarta Common fileupload 라이브러리를 사용하고 있기때문에 WEB-INF/lib/에 commons-fileupload.jar를 넣는다.

출처 : http://wiki.fckeditor.net/Developer%27s_Guide/Integration/Java