CKFinderの設置方法

前回設置したCKEditorにCKFinderを設置するこになった。
というわけで、設置方法をメモる。

1．CKFinderをダウンロード

2．ダウンロードしたCKFinderをサーバーに設置

基本的には、公式サイトにドキュメントがあるので、そちらを参考にすればOK。
CKEditor Developers Guide
CKFinder Developers Guide

設置場所はどこでも良いが、CKEditorが設置しているのと同じディレクトリにする。
/home/username/public/js/ckfinder/
（CKEditorは、/home/username/public/js/ckeditor/ に設置している）

3．ckfinder/config.php　を修正

・ライセンスコードを記述

$config['LicenseName'] = 'hoge';
$config['LicenseKey'] = 'fuga';

・CheckAuthentication関数を変更
    ログインユーザー（管理者）のみファイルアップロードが可能にしたいので、認証ロジックを組み込む。

function CheckAuthentication()
{
    include 'lib/Admin/Auth.php';
    return AdminAuth::isAuthorized();
}

※【AdminAuth】クラスは自作クラス

・baseURLを変更
    ログインユーザーごとにアップロードディレクトリを変更する。

if ( CheckAuthentication() )
{
    $identity = AdminAuth::getInstance()->getIdentity();
    $baseUrl = '/uploads/'.$identity->userid.'/';
}

4．CKEditorを組み込んでいる入力画面を修正

・jsファイルを読み込み

<script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>

・CKEditorのtoolbar に ['Image','Flash'] を追記

・CKEditorにCKFinderをセットアップ

var editor = CKEDITOR.replace( 'editor' , {
    ・・・
    config.filebrowserBrowseUrl      = '/js/kcfinder/browse.php?type=files';
    config.filebrowserImageBrowseUrl = '/js/kcfinder/browse.php?type=images';
    config.filebrowserFlashBrowseUrl = '/js/kcfinder/browse.php?type=flash';
    config.filebrowserUploadUrl      = '/js/kcfinder/upload.php?type=files';
    config.filebrowserImageUploadUrl = '/js/kcfinder/upload.php?type=images';
    config.filebrowserFlashUploadUrl = '/js/kcfinder/upload.php?type=flash';
});

・イメージプロパティダイアログやFlashプロパティダイアログのタブの順番が気にくわないので、アップロードタブを一番左にセットする　参考
 

CKEDITOR.on( 'dialogDefinition', function( ev )
{
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if ( dialogName == 'image' || dialogName == 'flash' )
    {
        var contents = dialogDefinition.getContents( 'Upload' );
        dialogDefinition.removeContents( 'Upload' );
        dialogDefinition.addContents( contents, 'info' );
    }
});

これで、CKFinderを使えるようになった。