商品の詳細情報入力にWYSIWYGを組み込む。

1. FCKediterのパッケージをダウンロード&解凍してFTPでアップロード。（/html/に設置）
   （※FCKエディタのほうのファイルにも、事前に組み込み用の設定をいくつかしないといけない。下のほうに詳細を書く。）
2. /admin/main_frame.tpl にJSの読み込みリンク記述。
   

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

3. 入力テンプレートのtextareaにエディタの組み込みタグを入れる。
   /admin/products/product.tpl の入力エリアにID属性を追加。
   idの値がname属性と同じになるように、ID属性を追加する。

   <tr>
     <td bgcolor=”#f2f1ec” width=”160″ class=”fs12n”>詳細-メインコメント<span class=”red”>(タグ許可)*</span></td>
     <td bgcolor=”#ffffff” width=”557″ class=”fs10n”>
     <span class=”red12″><!–{$arrErr.main_comment}–></span>
     <textarea id=”main_comment” name=”main_comment” value=”<!–{$arrForm.main_comment|escape}–>” maxlength=”<!–{$smarty.const.LLTEXT_LEN}–>” style=”<!–{if $arrErr.main_comment != “”}–>background-color: <!–{$smarty.const.ERR_COLOR}–><!–{/if}–>”  cols=”60″ rows=”8″ class=”area60″><!–{$arrForm.main_comment|escape}–></textarea><br /><span class=”red”> （上限<!–{$smarty.const.LLTEXT_LEN}–>文字）</span></td>
   </tr>

4. /admin/products/product.tpl にエディタのJS呼び出し用のJAVASCTIPTを追加する。上のほう。
   

   <script type=”text/javascript”>
   $(function(){
     var oFCKeditor = new FCKeditor( ‘main_comment’ ) ;
     oFCKeditor.ToolbarSet = ‘ECCUBE’ ;
     oFCKeditor.ReplaceTextarea() ;
   });
   </script>

———
FCKediter用の設定。

その１：アップロード機能。
fckconfig.jsの以下の部分を修正する。

var _FileBrowserLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘php’ ; // asp | aspx | cfm | lasso | php

FCKConfig.LinkUpload = false ;

FCKConfig.ImageUpload = false ;

FCKConfig.FlashUpload = false ;コネクターにはPHPを使う。
そして、アップロードタブは表示しない。アップロードタブで選択するアップローダにはバグがあり、目的のフォルダにアップロードできない。

editor/filemanager/browser/default/connectors/php/config.phpの以下の部分を修正する。

$Config[‘Enabled’] = true ;

// $Config[‘UserFilesPath’] = ‘/UserFiles/’ ;コネクターを使用可にする。
アップロードディレクトリを動的に指定できるようにする。

アップロードディレクトリ
アップロードディレクトリを作成しておく。Webサーバが更新できるよう、アクセス権を設定しておく。PHPやCGIでユーザ別のディレクトリを作成する場合も、同様にアクセス権を設定させる。

FCKeditorのファイルマネージャは、指定されたアップロードディレクトリ上に、自動的にタイプ別のサブディレクトリを作成する。
このため、PHPがセーフモードの場合にはアップロードしたファイルを保存できないので注意が必要。

その２：組み込みのカスタマイズ。→面倒なのでやらない。
 
その３：fckconfig.jsに、テーマを追加する。
defoultの記述をコピーしてECCUBEという名称で作成。（ボタンの数や並びは適宜修正すること）

↓これだけ分のコードをコピペで複製してDefaultをECCUBEに変更。
FCKConfig.ToolbarSets[“Default“] = [　
 [‘Source’,’DocProps’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’],
 [‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’,’-‘,’Print’,’SpellCheck’],
 [‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
 [‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
 ‘/’,
 [‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’-‘,’Subscript’,’Superscript’],
 [‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],
 [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
 [‘Link’,’Unlink’,’Anchor’],
 [‘Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’],
 ‘/’,
 [‘Style’,’FontFormat’,’FontName’,’FontSize’],
 [‘TextColor’,’BGColor’],
 [‘FitWindow’,’ShowBlocks’,’-‘,’About’]  // No comma for the last row.

【参考】

■最新版の日本語エディタ（文字変換とかチップスの表示とかが日本語化されているので使いやすく不要なエラーに遭遇しなくてすむ）
http://www.dakiny.com/archives/fckeditor/ajax_wysiwyg_editor_fckeditor_26/

■アップロード機能を正常に使うための設定とツールバーの設定についてアップされている記事
http://akira.matrix.jp/index.php?ID=58
http://akira.matrix.jp/index.php?ID=61

• EC-CUBE
• FCKediter
• WYSIWYG