オープンソースの販売サイト構築ソフト EC-CUBE についてのメモ。

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 では、標準で対応済み。設定も必要ない。クライアント(ブラウザ)の設定を反映しているっぽい(未確認)。しかも、見た目も美しくなっている。素晴らしい!

拡張/ckeditor.txt · 最終更新: 2009/11/10 09:16 by seasoft
© 2008-2019 Seasoft.