EC-CUBEでFCKeditorを使う

商品登録ページの詳細-メインコメントの部分を、WYSIWYG編集できるようにFCKeditorを使えるようにする。

EC-CUBE 2.3.0

まず、こちらのサイト

AjaxなWYSIWYGエディタ、FCKeditor 2.6 日本語版をリリースしたよ。

から　FCKeditor_2.6_ja.zip　をダウンロードし、解凍してから　fckeditor　ディレクトリをアップロード。
（アップロードする場所は　html/fckeditor）

/data/Smarty/templates/default/admin/main_frame.tpl　の39行目あたりに下記の３行目の部分を挿入。

<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/css.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/file_manager.js”></script>
<script type=”text/javascript” src=”<!–{$smarty.const.URL_DIR}–>/fckeditor/fckeditor.js”></script>

/data/Smarty/templates/default/admin/products/product.tpl　に

<script type=”text/javascript”>
$(function(){
var oFCKeditor = new FCKeditor( ‘main_comment’ ) ;
oFCKeditor.ReplaceTextarea() ;
oFCKeditor.ToolbarSet = ‘EC-CUBE‘ ; //ツールバーの設定
});
</script>

を追加。

html/fckeditor/fckeditor.js　下記のように適宜修正。

var FCKeditor = function( instanceName, width, height, toolbarSet, value )
{
// Properties
this.InstanceName    = instanceName ;
this.Width            = width            || ’100%’ ;
this.Height            = height        || ‘300‘ ;//　初期設定は200
this.ToolbarSet        = toolbarSet    || ‘EC-CUBE‘ ;//　←ツールバーセットの指定
this.Value            = value            || ” ;
this.BasePath        = FCKeditor.BasePath ;
this.CheckBrowser    = true ;
this.DisplayErrors    = true ;

this.Config            = new Object() ;

// Events
this.OnError        = null ;    // function( source, errorNumber, errorDescription )
}

そして、50行目あたり

FCKeditor.BasePath = ‘/fckeditor/’ ;

を

FCKeditor.BasePath = ‘/html/fckeditor/’ ;

に修正。

html/fckeditor/fckconfig.js　の45行目あたりでスキンの指定をする。（これはスキンを変更したいときだけ）

FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/silver/’ ;

137行目あたりにツールバーセットを追加。（下記はEC-CUBE用にシンプルにしてみたサンプル）

FCKConfig.ToolbarSets["EC-CUBE"] = [
['Source'],
['Bold','Italic','Underline','StrikeThrough'],
['OrderedList','UnorderedList'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['Table','Rule','Smiley'],
['TextColor'],
['FitWindow'],
‘/’,
['FontFormat','FontSize'],['RemoveFormat'],
// No comma for the last row.
] ;

これでＯＫ！