EC-CUBEの小技:WYSIWYGエディタ『CKEditor』を管理画面に設置

この記事は最終更新日から1年以上が経過しています。
WordPressをはじめ、ブログ等のテキスト型更新日記のような方式のものでは、当たり前のようについているのがWYSIWYGエディタです。

このWYSIWYGエディタというのは、WYSIWYG(What You See Is What You Get.の各単語の頭文字をとったもの)らしく、WEBオーサリングツールと呼んだり、リッチエディタリッチテキストエディタとも呼ばれています。

当たり前のようについているというこの機能、ECCUBEにはついておりません。
無くても成立するような作りにはなっていますが、小さな解説画像を差し込みたいとき、文字を太くして強調したいとき、こういった場合にはHTMLタグを必要とします。

出来る人間の話ではなく、出来ない人間に提供する事を考えると、やはり必要ではないか、というわけです。

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

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

Be the first to comment

Leave a Reply

Your email address will not be published.


*


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください