EC-CUBE:テキストエリアにエディタ(WYSIWYG)を設置

2012/5/11 下記修正
———————————————-
メルマガ管理に配置したとき、CKeditorの機能を使用しないで文章を作成してもHTML形式として保存され、タグが表示されてしまう場合があるので、ラジオボタンで「テキスト」を選択した時点でCKeditorのパレットは消え、機能させないように改良した。
修正ファイルは以下の2つ。修正内容は、下記参照。
■data/Smarty/templates/admin/mail/template_input.tpl
■data/Smarty/templates/admin/mail/input.tpl
———————————————-

CKeditor(FCKeditorの後継)をインストールし、下記のテキストエリアに適用する。
1 商品登録の「詳細-メインコメント」
2 商品登録のサブ情報「詳細-サブコメント」
3 メルマガ管理の「テンプレート設定」

1 テキストエリアにエディタを適用するかしないかをmtb_constantsテーブルに登録する。
——————————————-
id:EDITOR_USE
name:6
rank:1248(←適宜)
remarks:テキストエリアにエディタを適用 詳細メイン1 詳細サブ3 メルマガ5 複数適用の場合は、数字をたす。6(1+5)指定で、詳細メインとメルマガに適用
——————————————-
詳細メインのみ→1
詳細サブのみ→3
メルマガのみ→5
詳細メインと詳細サブ→4
詳細メインとメルマガ→6
詳細サブとメルマガ→8
すべてに適用→9

★システム設定>パラメーター設定を開き、「この内容で登録する」をクリック。

2 下記よりCKeditor本体と画像アップロード用のCKfinderをダウンロードする。
CKeditor:http://ckeditor.com/download
CKfinder:http://ckfinder.com/download

3 html/user_data/に、editorフォルダを作成する。さらにその中に下記の2つのフォルダを作成し、必要なファイルをアップロードする。
(1)ckeditorフォルダ
————————————-
ckeditor.js
config.js
adaptersフォルダ
imagesフォルダ
langフォルダ
pluginsskinsフォルダ
skinsフォルダ
themesフォルダ
————————————-

(2)ckfinderフォルダ
————————————-
ckfinder.html
ckfinder.js
ckfinder.php
ckfinder_v1.js
config.js
config.php
coreフォルダ
helpフォルダ
langフォルダ
pluginsフォルダ
skinsフォルダ
userfilesフォルダ
————————————-

4 下記ファイルを修正

(1)■html/user_data/editor/ckfinder/config.php
下記2カ所を変更
————————————-
return false; → return true;

$baseUrl = ‘/ckfinder/userfiles/‘;

$baseUrl = ‘http://’.$_SERVER[“SERVER_NAME”].dirname($_SERVER[‘PHP_SELF’]).’/upload/‘;
————————————-

※ アップロードしたファイルは、下記フォルダに保存されるようになる。
http://ドメイン名/EC-CUBEをインストールしたフォルダ名/user_data/editor/ckfinder/core/connector/php/upload/images/

階層は深くなるが、メルマガで使用するためには、画像のリンク先をドメイン名から始まるものにしなければならない。
保存用フォルダは自動生成されるので作成しなくてもよい。

(2)■user_data/editor/ckeditor/plugins/image/dialogs/image.js
プレビューボックスの訳の分からない文字列を下記に変更する。
————————————-
画像をアップロードするには2つの方法があります。

(1)「サーバーブラウザー」ボタンをクリックすると新規ブラウザが立ち上がるので、上部の「アップロード」をクリックします。アップロードした画像を右クリックして表示されるメニューから「この画像を選択」をクリックすればテキストエリアに挿入できます。

(2)「アップロード」タブをクリックして画像を選択しアップロードします。
————————————-

(3)■user_data/editor/ckeditor/lang/ja.js
サーバーに送信」が多少分かりにくいので、「アップロードする」に置換。

(4)■user_data/editor/ckfinder/lang/ja.js
Add Files」を「画像を追加」に置換

(5)■data/Smarty/templates/admin/main_frame.tpl
~に以下を追加。

 <!--CKeditor-->
 <!--{assign var=product value="`$smarty.const.ROOT_URLPATH`admin/products/product.php"}-->
 <!--{assign var=template_input value="`$smarty.const.ROOT_URLPATH`admin/mail/template_input.php"}-->
 <!--{if $smarty.server.PHP_SELF==$product || $smarty.server.PHP_SELF==$template_input}-->
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckeditor/ckeditor.js"></script>
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckfinder/ckfinder.js"></script>
 <!--{/if}-->

(6)■data/Smarty/templates/admin/products/product.tpl
 詳細-メインコメントのテキストエリア、textareaname=”main_comment”の間に下記を追加。

 <textarea
 <!--{if $smarty.const.EDITOR_USE == 1 || $smarty.const.EDITOR_USE == 4 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 9}-->
 class="ckeditor" id="main_comment"
 <!--{/if}-->
 name="main_comment"・・・
 

※ id属性は、name属性と同じ内容にする。

② 詳細-サブコメントのテキストエリア、textareaname=”sub_commentの間に下記を追加。

 <textarea
 <!--{if $smarty.const.EDITOR_USE == 3 || $smarty.const.EDITOR_USE == 4 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
 class="ckeditor" id="sub_comment<!--{$smarty.section.cnt.iteration}-->"
 <!--{/if}-->
 name="sub_comment<!--{$smarty.section.cnt.iteration}-->"・・・
 

※ id属性は、name属性と同じ内容にする。

 一番下に追加。

 <!--{if $smarty.const.EDITOR_USE == 1 || $smarty.const.EDITOR_USE == 4 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 9}-->
 <script type="text/javascript">
 var editor = CKEDITOR.replace( 'main_comment' );
 editor.setData();
 CKFinder.setupCKEditor( editor, '<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckfinder/' ) ;
 </script>
 <!--{/if}-->

<!--{if $smarty.const.EDITOR_USE == 3 || $smarty.const.EDITOR_USE == 4 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
 <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
 <script type="text/javascript">
 var editor = CKEDITOR.replace( 'sub_comment<!--{$smarty.section.cnt.iteration}-->' );
 editor.setData();
 CKFinder.setupCKEditor( editor, '<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckfinder/' ) ;
 </script>
 <!--{/section}-->
 <!--{/if}-->

(7)メルマガ管理のテンプレート作成画面
■data/Smarty/templates/admin/mail/template_input.tpl
変更が多いので、すべてのコードを表示している。
※ なお、CKeditorを適用すると、「文字数カウント」は機能しなくなります。

<!--{*
/*
* This file is part of EC-CUBE
*
* Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved.
*
* http://www.lockon.co.jp/
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
*/
*}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="<!--{$mode}-->" />
<input type="hidden" name="template_id" value="<!--{$arrForm.template_id|h}-->" />

<div id="mail" class="contents-main">
<table class="form">
<tr>
<th>メール形式<span class="attention"> *</span></th>
<td>
<span <!--{if $arrErr.mail_method}--><!--{sfSetErrorStyle}--><!--{/if}-->><!--{html_radios name="mail_method" options=$arrMagazineType separator="&nbsp;" selected=$arrForm.mail_method}--></span>
<!--{if $arrErr.mail_method}--><br /><span class="attention"><!--{$arrErr.mail_method}--></span><!--{/if}-->
</td>
</tr>
<tr>
<th>Subject<span class="attention"> *</span></th>
<td>
<input type="text" name="subject" size="65" class="box65" <!--{if $arrErr.subject}--><!--{sfSetErrorStyle}--><!--{/if}--> value="<!--{$arrForm.subject|h}-->" />
<!--{if $arrErr.subject}--><br /><span class="attention"><!--{$arrErr.subject}--></span><!--{/if}-->
</td>
</tr>
<tr>
<th>本文<span class="attention"> *</span><br />(名前差し込み時は {name} といれてください)</th>
<td>
<!--{if $smarty.const.EDITOR_USE == 5 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
<!--{if $arrForm.mail_method == 2}-->
<textarea name="body" cols="90" rows="40" class="area90 top" <!--{if $arrErr.body}--><!--{sfSetErrorStyle}--><!--{/if}-->><!--{$arrForm.body|h}--></textarea>
<!--{else}-->
<div id="htmlmail">
<textarea class="ckeditor" id="body" name="body" cols="90" rows="40" <!--{if $arrErr.body}--><!--{sfSetErrorStyle}--><!--{/if}-->><!--{$arrForm.body|h}--></textarea>
</div>
<!--{/if}-->
<!--{else}-->
<textarea name="body" cols="90" rows="40" class="area90 top" <!--{if $arrErr.body}--><!--{sfSetErrorStyle}--><!--{/if}-->><!--{$arrForm.body|h}--></textarea>
<!--{/if}-->
<!--{if $arrErr.body}--><br /><span class="attention"><!--{$arrErr.body}--></span><!--{/if}-->
<div>
<a class="btn-normal" href="javascript:;" onclick="fnCharCount('form1','body','cnt_footer'); return false;" name="next" id="next"><span>文字数カウント</span></a>
<span>今までに入力したのは<input type="text" name="cnt_footer" size="4" class="box4" readonly = true style="text-align:right" />文字です。</span>
</div>
</td>
</tr>
</table>
<div class="btn-area">
<!--{if $smarty.const.EDITOR_USE == 5 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
<div id="comment"></div>
<!--{/if}-->
<ul>
<li><a class="btn-action" href="javascript:;" onclick="fnFormModeSubmit('form1', '<!--{$mode}-->', '', ''); return false;"><span class="btn-next">この内容で登録する</span></a></li>
</ul>
</div>
</div>

<!--{if $smarty.const.EDITOR_USE == 5 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
<!--{if $arrForm.mail_method == 2}-->
<!--{else}-->
<script type="text/javascript">
var editor = CKEDITOR.replace( 'body' );
editor.setData();
CKFinder.setupCKEditor( editor, '<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckfinder/' ) ;
</script>
<!--{/if}-->
<!--{/if}-->

<script type="text/javascript">
jQuery(function() {
jQuery('input[value="2"]').change(function(){
var data = jQuery(this).val();
jQuery('#htmlmail').html('<textarea name="body" cols="90" rows="40" class="area90 top" <!--{if $arrErr.body}--><!--{sfSetErrorStyle}--><!--{/if}-->><!--{$arrForm.body|h}--></textarea>');
jQuery('#comment').html('<div class="attention">「この内容で登録する」のクリック操作を2回行ってください。</div>');
});
});
</script>

</form>
 

(8)メルマガ管理の配信内容作成画面
■data/Smarty/templates/admin/mail/input.tpl
変更が多いので、すべてのコードを表示している。

<!--{*
/*
* This file is part of EC-CUBE
*
* Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved.
*
* http://www.lockon.co.jp/
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
*/
*}-->
<!--{if $smarty.const.EDITOR_USE == 5 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckfinder/ckfinder.js"></script>
<!--{/if}-->
<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<!--{foreach key=key item=item from=$arrHidden}-->
<!--{if is_array($item)}-->
<!--{foreach item=c_item from=$item}-->
<input type="hidden" name="<!--{$key}-->[]" value="<!--{$c_item|h}-->" />
<!--{/foreach}-->
<!--{else}-->
<input type="hidden" name="<!--{$key}-->" value="<!--{$item|h}-->" />
<!--{/if}-->
<!--{/foreach}-->
<input type="hidden" name="mode" value="template" />
<input type="hidden" name="mail_method" value="<!--{$arrForm.mail_method.value}-->" />
<div id="mail" class="contents-main">
<table class="form">
<tr>
<th>テンプレート選択<span class="attention"> *</span></th>
<td>
<!--{assign var=key value="template_id"}-->
<!--{if $arrErr[$key]}--><span class="attention"><!--{$arrErr[$key]}--></span><!--{/if}-->
<select name="<!--{$key}-->" onchange="return fnInsertValAndSubmit( document.form1, 'mode', 'template', '' ) " style="<!--{$arrErr[$key]|sfGetErrorColor}-->">
<option value="" selected="selected">選択してください</option>
<!--{html_options options=$arrTemplate selected=$arrForm[$key].value}-->
</select>
</td>
</tr>
</table>

<!--{if $arrForm.template_id.value}-->
<table class="form">
<tr>
<th>Subject<span class="attention"> *</span></th>
<td>
<!--{assign var=key value="subject"}-->
<!--{if $arrErr[$key]}--><span class="attention"><!--{$arrErr[$key]}--></span><!--{/if}-->
<input type="text" name="subject" size="65" class="box65" style="<!--{$arrErr[$key]|sfGetErrorColor}-->" value="<!--{$arrForm[$key].value|h}-->" />
</td>
</tr>
<tr>
<th>本文<span class="attention"> *</span><br />(名前差し込み時は {name} といれてください)</th>
<td>
<!--{assign var=key value="body"}-->
<!--{if $arrErr[$key]}--><span class="attention"><!--{$arrErr[$key]}--></span><!--{/if}-->
<!--{if $smarty.const.EDITOR_USE == 5 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
<!--{if $arrForm.mail_method.value == 2}-->
<textarea name="body" cols="90" rows="40" class="area90 top" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key].value|h}--></textarea>
<!--{else}-->
<div id="htmlmail">
<textarea class="ckeditor" id="body" name="body" cols="90" rows="40" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key].value|h}--></textarea>
</div>
<!--{/if}-->
<!--{else}-->
<textarea name="body" cols="90" rows="40" class="area90 top" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key].value|h}--></textarea>
<!--{/if}-->
</td>
</tr>
</table>
<!--{/if}-->

<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="return fnInsertValAndSubmit( document.form1, 'mode', 'back', '' ); return false;"><span class="btn-prev">検索画面に戻る</span></a></li>
<li><a class="btn-action" href="javascript:;" onclick="return fnInsertValAndSubmit( document.form1, 'mode', 'regist_confirm', '' ); return false;" ><span class="btn-next">確認ページへ</span></a></li>
</ul>
</div>
</div>
</form>

<!--{if $smarty.const.EDITOR_USE == 5 || $smarty.const.EDITOR_USE == 6 || $smarty.const.EDITOR_USE == 8 || $smarty.const.EDITOR_USE == 9}-->
<!--{if $arrForm.mail_method.value == 2}-->
<!--{else}-->
<script type="text/javascript">
var editor = CKEDITOR.replace( 'body' );
editor.setData();
CKFinder.setupCKEditor( editor, '<!--{$smarty.const.ROOT_URLPATH}-->user_data/editor/ckfinder/' ) ;
</script>
<!--{/if}-->
<!--{/if}-->

(9)■data/Smarty/templates/default/products/detail.tpl

の下に、