CKEditorファイルのダウンロードとアップロード

まず、以下のページよりファイルをダウンロードして下さい。
CKEditorダウンロード

ダウンロードページは段で別れていますが、CKEditorという最上段の「Download zip」をクリックすれば間違いないかと思います。

そして、解凍。

出来たファイルを /html/js に突っ込めば第一段階完了。

数か所ファイルを修正

まず、日本語化しましょう。
ckeditor/config.js　
9行目を以下のように変更

config.language = 'ja';

/data/Smarty/templates/admin/main_frame.tpl
48行目付近に以下を追加

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/ckeditor/ckeditor.js"></script>

ここまでで、準備完了。
次は設置したい場所を書き換えます。
試しに、管理画面の商品管理＞商品登録ページにエディタを追加してみましょう。
/data/Smarty/templates/admin/products/product.tpl
278行目付近(詳細-メインコメント)を以下に変更

        <tr>
        <script type="text/javascript">
		var editor = CKEDITOR.replace( 'editor' );
		</script>
            <th>詳細-メインコメント<span class="attention">(タグ許可)*</span></th>
            <td>
                <span class="attention"><!--{$arrErr.main_comment}--></span>
                <textarea class="ckeditor" id="editor" name="main_comment"  value="<!--{$arrForm.main_comment|h}-->" 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|h}-->
                </textarea><br />
                <span class="attention"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
            </td>
        </tr>

以上となります。

TRタグ内にスクリプトを記入しなくてもよかったのですが、どこに書いても良さそうなので、手間を省くため、同じ個所にしました。

僕としてはボタンが多すぎて使いにくそうな感じがするので、近々カスタマイズに挑戦してみます。
では。