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

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

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

１．CKEditorをインストール
　　（詳細は省略）

３．ダウンロードしたKCFinderををサーバーに設置

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

４．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】クラスは自作クラス

５．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';
});

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

６．実際にアクセスしてみる。

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

あれ？まっしろ、、、

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

７．ということで、再度 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は以下の条件が必要

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

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

インストールしたpluginは

の２つ。

設置方法は

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 があったので、それをコピーして編集すればＯＫ。

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 : '動画の埋め込みコードを貼り付けてください'
    }
});

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

ckeditor

CKFinder からKCFinderに乗り換え

あれ？まっしろ、、、

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

カテゴリー

最近の投稿

アーカイブ