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

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