CKEditor

CKFinder からKCFinderに乗り換え

WYSIWYGエディタは「CKEditor」 + 「CKFinder」を利用していたが、「KCFinder」というツールを見つけた。

CKFinderは有料だが、KCFinderは無料で利用可なので、早速導入してみた。

インストールはこちらを参考にさせていただきました。
では、早速インストールしてみる。

1.CKEditorをインストール
  (詳細は省略)

2.KCFinderをダウンロード

3.ダウンロードしたKCFinderををサーバーに設置

  CKEditorを doc_root/js/ckeditor に設置しているので、
  KCFinderを doc_root/js/kcfinder に設置する

4.kcfinder/config.php に追記

//    override config setting
$_CONFIG['disabled'] = !CheckAuthentication();
$_CONFIG['uploadURL'] = '/uploads/';
$_CONFIG['uploadDir'] = 'doc_root/uploads/';

//  ユーザー認証
function CheckAuthentication() {
    include 'lib/Admin/Auth.php';
    return AdminAuth::isAuthorized();
}

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

5.CKEditorにKCFinderをセットアップ
  ckeditor/config.js を修正

CKEDITOR.editorConfig = function( config )
    ・・・
    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';
});

これでインストール完了。

6.実際にアクセスしてみる。

「サーバーブラウザ-」をクリック

あれ?まっしろ、、、

 

原因を調査すると、kcfinder/core/autoload.php に定義されている function __autoload() が正常に動作していない様子。
自分のソースではZendFramework なども使用しているため、__autoload() が上書きされてしまったようだ。

 

7.ということで、再度 kcfinder/config.php に追記

//    __autoloaderが上書きされるので再定義
spl_autoload_register('kcfinderAutoload');
function kcfinderAutoload($class) {
    if ($class == "uploader")
        require "core/uploader.php";
    elseif ($class == "browser")
        require "core/browser.php";
    elseif (file_exists("core/types/$class.php"))
        require "core/types/$class.php";
    elseif (file_exists("lib/class_$class.php"))
        require "lib/class_$class.php";
    elseif (file_exists("lib/helper_$class.php"))
        require "lib/helper_$class.php";
}

再度アクセスする。

めでたく表示されました。

ちなみにファイルのアップロードは、FireFoxやGoogleChromeならドラッグ&ドロップでも行えます。
便利!!

 

「KCFinder」は「CKFinder」と遜色なく使える。

ただし注意点として、KCFinderは以下の条件が必要

  1. WebサーバはApache2
  2. PHP5をApacheのモジュールとしてインストール
    (できればPHPのバージョンは5.3以上)
  3. PHPのGD、ZIPモジュール利用可
  4. IE6なんてサポートしません

 

 

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を使えるようになった。

CKEditorにYoutube貼りつけボタンを追加する

今回、CKEditorにYoutube動画貼付け用のpluginを追加することになったので、設置方法をメモる。

インストールしたpluginは

の2つ。

設置方法は

1.ソースをDLして解凍

2.youtubeフォルダとmediaembedフォルダをCKEditorのpluginフォルダ(ckeditor/plugins/)へコピー

3.ckeditor/config.js に config.extraPlugins = 'youtube,ediaembed'; を追加 (MediaEmbedのreadme.txtには「config.extraPlugins = 'MediaEmbed';」と記述されていたが、すべて小文字にしないと動かなかった、、、)

CKEDITOR.editorConfig = function( config ){
    ...
    config.extraPlugins = 'youtube,ediaembed';
};

4.ツールバーに'MediaEmbed','Youtube' を追加 参考ページ

CKEDITOR.editorConfig = function( config )
{
    ...
    config.toolbar = 'MyToolbar';
    config.toolbar_MyToolbar =
    [
        ...
        ['MediaEmbed','Youtube']
    ];
};

これで、とりあえず利用可能な状態になる。

次に日本語化をする。

CKEditorのpluginを日本語化するには、各pluginごとにlang/ja.jsファイルを作成する必要がある。

幸い、Youtube pluginには lang/en.js があったので、それをコピーして編集すればOK。

1.ckeditor/plugins/youtube/plugin.js の「lang」設定に「ja」を追加

CKEDITOR.plugins.add('youtube',{
    lang:['en','uk','ja'],
    ...
})

2. ckeditor/plugins/youtube/lang/en.js をコピーして ja.js を作成して、必要に応じて日本語化する

Youtube plugin はこれでおしまい。

 

問題はMediaEmbed plugin。。。 langディレクトリがない、、、

というわけで、多言語に対応できるよう修正する

1.ckeditor/plugins/mediaembed/plugin.js を以下のように修正する

( function() {
    CKEDITOR.plugins.add( 'mediaembed',{
        lang:['en','ja'],
        requires: [ 'iframedialog' ],
        init: function( editor ){
            var me = this;
            CKEDITOR.dialog.add( 'MediaEmbedDialog', function (){
                return {
                    title     : editor.lang.mediaembed.title,
                    minWidth  : 550,
                    minHeight : 200,
                    contents  : [{
                        id       : 'iframe',
                        label    : 'Embed Media',
                        expand   : true,
                        elements : [{
                            type  : 'html',
                            id    : 'pageMediaEmbed',
                            label : 'Embed Media',
                            style : 'width : 100%;margin:0;padding:0;',
                            //html  : '<iframe src="'+me.path+'/dialogs/mediaembed.html" frameborder="0" name="iframeMediaEmbed" id="iframeMediaEmbed" allowtransparency="1" style="width:100%;margin:0;padding:0;"></iframe>'
                            html  : '<style> body { font: normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; } #embed { width: 100%; height: 110px; margin: 5px 0 0 0; border: 1px solid #a0a0a0; font: normal 11px Courier, Fixedsys, serif; background-color: #ffffff; }</style> '+editor.lang.mediaembed.inputMsg+'<br /><textarea id="embed" /></textarea>'
                        }]
                    }],
                    onOk : function(){
                        //  CKEditorを複数設置した場合、うまく動作しなかったので修正
                        /*
                        for (var i=0; i<window.frames.length; i++) {
                            alert(window.frames[i].name);
                            if(window.frames[i].name == 'pageMediaEmbed') {
                                var content = window.frames[i].document.getElementById("embed").value;
                            }
                        }*/
                        var content = document.getElementById("embed").value;
                        final_html = 'MediaEmbedInsertData|---' + escape('<div class="media_embed">'+content+'</div>') + '---|MediaEmbedInsertData';
                        this.getParentEditor().insertHtml(final_html);
                        updated_editor_data = this.getParentEditor().getData();
                        clean_editor_data = updated_editor_data.replace(final_html,'<div class="media_embed">'+content+'</div>');
                        this.getParentEditor().setData(clean_editor_data);
                    }
                };
            });
            editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) );
            editor.ui.addButton( 'MediaEmbed', {
                label: editor.lang.mediaembed.button,
                command: 'MediaEmbed',
                icon: this.path + 'images/icon.gif
            });
        }
    });
})();

2.ckeditor/plugins/youtube/lang/en.js を作成

CKEDITOR.plugins.setLang('mediaembed', 'en',{
    mediaembed :{
        title : 'Embed Media Dialog',
        button : 'Embed Media',
        inputMsg : 'Paste Embed Code Here: '
    }
});

3.ckeditor/plugins/youtube/lang/ja.js を作成

CKEDITOR.plugins.setLang('mediaembed', 'ja',
{
    mediaembed :{
        title : '動画タグ',
        button : '動画タグ',
        inputMsg : '動画の埋め込みコードを貼り付けてください'
    }
});

これで、日本語化できました。。。