ホーム > programming > FCKeditor — Java との統合とファイル アップロード

FCKeditor — Java との統合とファイル アップロード

2009 年 5 月 17 日 コメントをどうぞ コメント

Javaウェブ・アプリケーションでFCKeditorを使う。また、FCKeditor を利用してファイル（写真とFlashなど）をアップロードし、簡単にコンテンツに挿入できる。簡単に管理と運用できるため、アップロードされたファイル のサーバ上の保存場所と名前について、カスタマイズし、「/${htdocs}/UserFiles/userid/type /yyyymmddzzzz.ext」のようにします。例えば、「http://uprush.net/UserFiles/2/Image /200710156978.jpg」のように保存します。

  • FCKeditor-2.3-javaのインストール

こちら から、最新バージョンの統合用ファイルをダウンロードできます。

ダウンロードしたファイルに含まれるFCKeditor-2.3.jarを直接使えますが、日本語名ファイルはアップロードで きない、また、アップロード・ファイルの保存場所と名前をカスタマイズしたいので、ソースを修正して利用します。解凍した「FCKeditor-2.3- java/src/FCKeditor.tld」を WEB-INF/tld にコピーする。「FCKeditor-2.3-java/src/com」フォルダをプロジェクトのソースフォルダにコピーする、例えばUprushの場 合は uprush/src です。

ファイル・アップロードについて、Apache の commons-fileupload が必要となります。FCKeditor-2.3-java にあるcommons-fileupload はバージョンが古いため、日本語名ファイルのアップロードができない。Apache から最新版ダウンロードし、commons-fileupload-1.2.jar をWEB-INF/lib に配置する。
 

ConnectorとSimpleUploader のservlet を指定する。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> 
    <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>false</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>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> 

 

fckeditor/fckconfig.js を修正する。

// FCKConfig.LinkUploadURL = FCKConfig.BasePath + ’filemanager/connectors/’ + _QuickUploadLanguage + ’/upload.’ + _QuickUploadExtension ; 
FCKConfig.LinkUploadURL = FCKConfig.BasePath + ’filemanager/upload/simpleuploader?Type=File’ ; 
 
// FCKConfig.ImageUploadURL = FCKConfig.BasePath + ’filemanager/connectors/’ + _QuickUploadLanguage + ’/upload.’ + _QuickUploadExtension + ’?Type=Image’ ; 
FCKConfig.ImageUploadURL = FCKConfig.BasePath + ’filemanager/upload/simpleuploader?Type=Image’ ; 
 
// FCKConfig.FlashUploadURL = FCKConfig.BasePath + ’filemanager/connectors/’ + _QuickUploadLanguage + ’/upload.’ + _QuickUploadExtension + ’?Type=Flash’ ; 
FCKConfig.FlashUploadURL = FCKConfig.BasePath + ’filemanager/upload/simpleuploader?Type=Flash’ ; 

 

最後、FCKeditor を取り込むJSPを修正する。FCKeditor の taglib をインポートする。

<%@ taglib uri="/WEB-INF/tld/FCKeditor.tld" prefix="FCK" %> 

 

FCKeditor を取り込む

<FCK:editor 
    id="FCKeditor1" 
    basePath="fckeditor/" 
    height="600" 
    defaultLanguage="Ja"> 
</FCK:editor> 

 

TomcatなどのAPサーバを起動し、ブラウザのキャッシュを消してから上記JSPにアクセスと、FCKeditor が画面に表示されるはずです。エディタの「イメージ挿入／編集」をクリックと下記画面が表示される。

 

  • サーバ・ブラウザを無効化

上記写真、Flashのアップロード画面に、「サーバーブラウザー」ボタンがあります。このボタンをクリックすると、アップロードされたファイルを保存するサーバー上のフォルダの内容が見えます。外向けのサーバにとって、この機能が好ましくないです。無効にする。fckeditor/fckconfig.js を修正する。

// FCKConfig.LinkBrowser = true ; 
FCKConfig.LinkBrowser = false ; 
 
// FCKConfig.ImageBrowser = true ; 
FCKConfig.ImageBrowser = false ; 
 
// FCKConfig.FlashBrowser = true ; 
FCKConfig.FlashBrowser = false ; 

 

ブラウザのキャッシュを消して確認すると、アップロード画面の「サーバーブラウザー」は消えた。

 

  • アップロード先のカスタマイズ

以上で FCKeditor と Java は連携できましたが、ファイルのアップロード、特に日本語名ファイルのアップロードにはまだ修正が必要です。

FCKeditor-java を使ってアップロードしたファイルは、デフォルト「$PROJECT_ROOT/UserFiles/type/filename」でサーバ上に保存され ます。ファイル数が多くなると管理が難しくなります。ですので、保存フォルダを「${htdocs}/UserFiles/userid/type」、 ファイル名を「yyyymmddzzzz.ext」にします。例えば、「/var/www/html/UserFiles/101/Image /200801160001.gif」として保存します。
先FCKeditor-2.3-javaのソースをプロジェクトにコピーしました。ソース com.fredck.FCKeditor.uploader.SimpleUploaderServlet を修正します。

ここの ${htdocs} はウェブ・コンテンツのフォルダを指します、例えば「/var/www/html」、値は設定ファイル（.properties）から取得します。  

String htdocDir = _rb.getString("htdocs_folder"); 

 

コンテンツを掲載するには、ログインが必要で、ユーザIDをセッションに保存すると想定します。ですので、userid はセッションから取得できます。

HttpSession session = request.getSession(); 
if (session != null) { 
    Object userid = session.getAttribute(USER_ID_KEY); 
    if (userid != null) { 
        currentPath = currentPath + (String) userid; 
    } 
} 

 

ファイル名は「日付＋乱数＋拡張子」（yyyymmddzzzz.ext）にします。

private String getFileID() { 
    int ranNum = RandomUtils.nextInt(10000); 
    Calendar c = Calendar.getInstance(); 
    String year = String.valueOf(c.get(Calendar.YEAR)); 
    String month = StringUtils.leftPad(String.valueOf(c.get(Calendar.MONTH) + 1), 2, ’0’); 
    String day = StringUtils.leftPad(String.valueOf(c.get(Calendar.DAY_OF_MONTH)), 2, ’0’); 
    String ret = year + month + day + String.valueOf(ranNum); 
 
    return ret; 
} 

 

Share and Enjoy:
  • del.icio.us
  • Google Bookmarks
  • Facebook
  • FriendFeed
  • Twitter
カテゴリー: programming タグ: , ,