CKEditor 3.6.3 を導入したのですが、 CKEditor では FCKEditor ごろに付属していた Webファイルマネージャーが付属しなくなっていました。CKEditorと連携する Web ファイルマネージャーで純正のものでは CKFinder があります。CKFinderは有料です。Web ファイルマネージャー があると ファイルのアップロードや イメージファイルやコンテンツへのリンクを GUI を使って設定できて便利です。今回は CKEditor と連携して動作できる フリーの Web ファイルマネージャー File Manager の導入メモを記載します。

そのほかのCKEditor と連携できる Web ファイルマネージャーとして　KCFinder という Web ファイルマネージャーがあります。こちらはphpで実装されています。
http://kcfinder.sunhater.com/

検証環境は次の通りです

• ASP.NET MVC 3
• CKEditor 3.6.3
• File Manager 記事作成時点で最新もバージョン(simogeo-Filemanager-cb9de7b.zip)

1. ファイルのダウンロード

http://labs.corefive.com/projects/filemanager/ の右側の Download Latest Revision のリンクをクリックします。GitHubのダウンロードページ に移動するので zip ファイルをダウンロードします。

2. セットアップ

ダウンロードしたファイルを解凍し、セットアップを行います。基本的にFile Manager のページ　のInstallation and Setup に従います。解凍したファイルを ASP.NET MVC のプロジェクトの ブラウザ経由で参照可能な任意の場所に配置します。

本例では [ASP.NET MVCプロジェクト]/FileManager に配置したものとして説明を記載します。/FileManager/scripts/filemanager.config.js.default をコピーして名前を filemanager.config.js にします。filemanager.config.js をファイルで編集します。最低限設定したほうがよいと思われる設定値の箇所を下表に記載します。

fileRoot の設定では下記注意事項をご参考ください。 

fileRootに設定してあるフォルダ配下に対して適切な権限を設定しなければ File Manager 経由でフォルダの作成やファイルのアップロードはできません。偽装を行っていない、ASP.NETアプリケーションの場合は アプリケーションプールのユーザーに対して適切な権限を付与する必要があります。

私の環境では filemanager.config.js の変更だけだとアイコンがうまく表示されなかったので、 /filemanaager/ashx/filemaanger.ashx も私の環境では変更しました。変更したのは IconDirectory の定義内容です。次のように定義を変更しました。コメントはオリジナルの定義です。

//public string IconDirectory = "/simogeo/images/fileicons/"; // Icon directory for filemanager. [string]
public string IconDirectory = VirtualPathUtility.ToAbsolute("~/filemanager/images/fileicons/"); // Icon directory for filemanager. [string]

以上でセットアップ完了です。

3. CKEditor との連携の設定

CKEditor にファイルマネージャーとして FileManager を使用するようにするには、次のように CKEditor を使用する javascript で FileManager を指定します。下例で targetTextArea は CKEditor 化するtextarea の id です。

<script type="text/javascript">
    $(function () {
        CKEDITOR.replace('targetTextArea',
        { filebrowserBrowseUrl: '@Url.Content("~/filemanager/index.html")'});
    });
</script>

CKEditor への組み込みが完了が成功すると、イメージ情報やハイパーリンクのメニュー選択じに表示される子画面に 下図のように サーバーブラウザー というボタンが表示されます。

サーバーブラウザーボタンをクリックすると、Filemanager の子画面が下図のように表示されます。　FileManager の操作は直感的に行えます。すばらしいです。

3.まとめ

説明は以上です。私の環境では元気に動いているみたいです。より細かい設定はFilemanagerのサイトや filemanager.config.js のコメントを参考にしてください。