今回、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 : '動画の埋め込みコードを貼り付けてください'
}
});
これで、日本語化できました。。。
