目次
CKEditor を組み込む
構成情報
- EC-CUBE 2.3.3-comu r17954
- CKEditor 3.0.1
CKEditor ソースの配置
- アンダースコアから始まるディレクトリー以外(直下のファイルも含む)を /html/user_data/packages/default/js/ckeditor/ に配置する。
EC-CUBE の編集 (ページ詳細設定)
管理機能 [デザイン管理] - [ページ詳細設定] の場合
/data/Smarty/templates/default/admin/design/main_edit.tpl
<div> - <textarea name="tpl_data" rows=<!--{$text_row}--> style="width: 100%;"><!--{$arrPageData.tpl_data|escape|smarty:nodefaults}--></textarea> + <script type="text/javascript" src="<!--{$TPL_DIR}-->js/ckeditor/ckeditor.js"></script> + <textarea name="tpl_data" rows=<!--{$text_row}--> style="width: 100%;" class="ckeditor"><!--{$arrPageData.tpl_data|escape|smarty:nodefaults}--></textarea> <input type="hidden" name="html_area_row" value="<!--{$text_row}-->" /> </div>
管理機能 [商品管理] - [商品登録] の場合
- Ver 2.4.1 正式版 + CKEditor 3.0.1 で確認。
/data/Smarty/templates/default/admin/products/product.tpl
<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 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> + <script type="text/javascript" src="<!--{$TPL_DIR}-->js/ckeditor/ckeditor.js"></script> + <textarea 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 ckeditor"><!--{$arrForm.main_comment|escape}--></textarea><br /><span class="red"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span></td> </tr>
要点
- <script> タグを追加。(当方で実際に試験した時は、もっと上部に書いた)
- <textarea> タグの class 属性に ckeditor を追加する。
ツールバーをカスタマイズ
表示を減らす例
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/ckeditor/ckeditor.js"></script> + <script type="text/javascript"> + <!-- + CKEDITOR.config.toolbar = + [ + ['Source','-','Cut','Copy','Paste','PasteText','-','Undo','Redo','-','Find','Replace','-','RemoveFormat'] + ,'/' + ,['Format','-','Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Table','HorizontalRule','SpecialChar'] + ]; + //--> + </script>
フルに表示する例
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/ckeditor/ckeditor.js"></script> + CKEDITOR.config.toolbar = + [ + ['Source','ShowBlocks','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'] + ,'/' + ,['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'] + ,'/' + ,['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['ShowBlocks'] + ];
日本語化
まだ、英語のみの対応のようだ。まぁ、無くても平気だし、待つ事にしよう。
CKEditor 3.0.1 では、標準で対応済み。設定も必要ない。クライアント(ブラウザ)の設定を反映しているっぽい(未確認)。しかも、見た目も美しくなっている。素晴らしい!