自家製CMSにはCKEditor + KCFinderがオススメ

CKEditorとTinyMCEは好みの問題もあるけど、
両方共に画像等のリソース管理ブラウザー機能が有償ライセンスになっている。
このお陰で同機能を導入出来ない方が多いみたい。
そんな方には、KCFinderがオススメ。
CKFinderと比べて名前が胡散臭い雰囲気だけど、必要機能は実装されている。
各種AjaxなHTMLエディタとの統合は、デモサイトを参照。

そんな訳で、お目当てのCKEditorとの統合に挑戦する。
早速は、それぞれダウンロードしてきて展開する。
今回は取説の通り、全て/var/www/html/* に配置した。
まずは、CKEditorの設定ファイル ( config.js )をKCFinderのサンプルを参考に編集する。

CKEDITOR.editorConfig = function(config) {

   config.language = 'ja';   config.filebrowserBrowseUrl = '/kcfinder/browse.php?type=files';
   config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?type=images';
   config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?type=flash';
   config.filebrowserUploadUrl = '/kcfinder/upload.php?type=files';
   config.filebrowserImageUploadUrl = '/kcfinder/upload.php?type=images';
   config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?type=flash';
};

実際に利用する場合は、適宜/kcfinderを変更する。
又、flashを管理しない場合は、filebrowserFlash*を削除する。
尚、KCFinderは日本語言語ファイルが同梱されていない。
本家に翻訳関連の掲示板への誘導があって、そちらに日本語言語ファイルが投稿されている。
残念ながら一部未翻訳な部分などあったので、パッチと言語ファイルを投稿しておいた。
英語に拒否反応を示すユーザーを抱えている方は、良かったらそちらを適用して下さい。

以下、実際の操作画面。

日本語化済みのCKEditor本体

KCFinder連携設定前のイメージプロパティ画面

KCFinder連携設定後のイメージプロパティ画面

KCFinderによる画像表示画面 ( 英語版 )

KCFinderによる画像表示( 日本語版 )

KCFiderでアップロードした画像を
そちらで選択するとCKEditorに埋め込まれる

CKEditorの通常入力に帰ってきた

以下、ハマった点。

• KCFinderのconfig.php内のdisabled値が'true'になっていて、サーバーブラウザーが起動しなかった。
• KCFinderでセッションを正しく利用するには、_session*の設定が必要。

セッション関連については、本家のセッション設定を参照。

[追記]
CKEFinder本家Forumにも挙がっていたけど、CKEditorではサーバーブラウザー機能は
ポップアップウィンドウでしか利用出来ない模様。
利用ユーザーがポップアップブロック機能をセキュリティポリシー等で操作出来ない場合は、
TinyMCEで inlinepopupを利用するといい。
ちなみに、Firefoxユーザーで「新しいウィンドウではなく新しいタブで開く」を設定している場合、
開いたポップアップウィンドウのウィンドウサイズでFirefoxのウィンドウ自体がリサイズされて
強烈に使い心地が悪くなるので注意が必要。

[追記2]
CKEditorのライセンスを誤解されているサイトいくつか見受けられるけれど、
本家ライセンスにトリプルライセンス(GPLv3、LGPL、MPL)、CDL(クローズドソース利用)と明記されている。
いずれも商用利用可能。
但し、CDLは本家記載の利用料が生じる。
トリプルライセンスについては、ソース公開の義務が生じるけれど、JSなんだから通常利用では現状は無問題。
手を加えるにしても、パッチ書いたりしたら明示とフィードバックくらいする...よね?
ちなみに「GPL=売れない」なんてFUDはミスリードなので悪しからず。

※CKEditorのダイアログなどのリサイズ方法をお探しの方は、こちらをどうぞ。