EC-CUBE2.12：テキストエリアにCKeditor（WYSIWYG）を設置

CKeditorをインストールし、下記のテキストエリアで使用する。

①　商品登録の「詳細-メインコメント」
②　商品登録のサブ情報「詳細-サブコメント」

「詳細-メインコメント」と「詳細-サブコメント」の両方で使用すると、エディタ数が多くなって読み込みに多少時間がかかるので、パラメータ設定で使用するかしないかを設定する。
また、エディタのパレットを常時表示しておくのは邪魔な感じがするので、使用時には、クリックで表示・非表示できるようにする。

1　テキストエリアにエディタを使用するかしないかをmtb_constantsテーブルに登録する。

INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('EDITOR_MAIN_COMMENT', 'true', 1424, '商品登録のメインコメントにエディタ使用（true:使用する，false:使用しない）');
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('EDITOR_SUB_COMMENT', 'false', 1425, '商品登録のサブコメントにエディタ使用（true:使用する，false:使用しない）')

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

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

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

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

（3）■html/user_data/ckeditor/config.js　追加

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; //改行をbrに変更
};

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
プレビューボックスの訳の分からない文字列を下記に変更する。
image_previewText||’Lorem ipsum dolor sit amet, ・・・・・・・’←”内を変更
————————————-
image_previewText||’画像をアップロードするには2つの方法があります。

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

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

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

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

5　管理画面で使用できるようにする。

（1）■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>
<script type="text/javascript">
$(document).ready(function() {
$(".click_ckeditor").click(function(){
$('.click_ckeditor').next().slideUp();
$(this).next().slideToggle("fast");
}).next();
});
</script>
<!--{/if}-->

（2）■data/Smarty/templates/admin/products/product.tpl
①　詳細-メインコメントのテキストエリア

<td>
<span class="attention"><!--{$arrErr.main_comment}--></span>
<textarea name="main_comment" 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 />
</td>

↓（変更）

<!--{if $smarty.const.EDITOR_MAIN_COMMENT == "true"}-->
<td>
<div class="ckeditor_area">
<div class="click_ckeditor left">テキストエディタを使用しない</div>
<div class="editor open">
<span class="attention"><!--{$arrErr.main_comment}--></span>
<textarea name="main_comment" 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 />
</div>
<div class="click_ckeditor right">テキストエディタを使用する</div>
<div class="editor">
<span class="attention"><!--{$arrErr.main_comment}--></span>
<textarea class="ckeditor" id="main_comment" name="main_comment" maxlength="<!--{$smarty.const.LLTEXT_LEN}-->" style="<!--{if $arrErr.main_comment != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}-->;<!--{/if}-->"><!--{$arrForm.main_comment|h}--></textarea><br />
</div>
<span class="attention"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
</div>
</td>
<!--{else}-->
<td>
テキストエディタを使用する場合は、パラメータ設定のEDITOR_MAIN_COMMENTをtrueにしてください。<br />
<span class="attention"><!--{$arrErr.main_comment}--></span>
<textarea name="main_comment" 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 />
</td>
<!--{/if}-->

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

②　詳細-サブコメントのテキストエリア

<td>
<span class="attention"><!--{$arrErr[$key]}--></span>
<textarea name="sub_comment<!--{$smarty.section.cnt.iteration}-->" cols="60" rows="8" class="area60" maxlength="<!--{$smarty.const.LLTEXT_LEN}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key]|h}--></textarea><br />
<span class="attention"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
</td>

↓（変更）

<!--{if $smarty.const.EDITOR_SUB_COMMENT == "true"}-->
<script type="text/javascript">
$(document).ready(function() {
$(".sub<!--{$smarty.section.cnt.iteration}-->").click(function(){
$('.sub<!--{$smarty.section.cnt.iteration}-->').next().slideUp();
$(this).next().slideToggle("fast");
}).next();
});
</script>
<td>
<div class="ckeditor_area">
<div class="click_ckeditor_sub sub<!--{$smarty.section.cnt.iteration}--> left">テキストエディタを使用しない</div>
<div class="editor open">
<span class="attention"><!--{$arrErr[$key]}--></span>
<textarea name="sub_comment<!--{$smarty.section.cnt.iteration}-->" cols="60" rows="8" class="area60" maxlength="<!--{$smarty.const.LLTEXT_LEN}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key]|h}--></textarea><br />
</div>
<div class="click_ckeditor_sub sub<!--{$smarty.section.cnt.iteration}--> right">テキストエディタを使用する</div>
<div class="editor">
<span class="attention"><!--{$arrErr[$key]}--></span>
<textarea class="ckeditor" id="sub_comment<!--{$smarty.section.cnt.iteration}-->" name="sub_comment<!--{$smarty.section.cnt.iteration}-->" cols="60" rows="8" class="area60" maxlength="<!--{$smarty.const.LLTEXT_LEN}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key]|h}--></textarea><br />
</div>
<span class="attention"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
</div>
</td>
<!--{else}-->
<td>
テキストエディタを使用する場合は、パラメータ設定のEDITOR_SUB_COMMENTをtrueにしてください。<br />
<span class="attention"><!--{$arrErr[$key]}--></span>
<textarea name="sub_comment<!--{$smarty.section.cnt.iteration}-->" cols="60" rows="8" class="area60" maxlength="<!--{$smarty.const.LLTEXT_LEN}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->"><!--{$arrForm[$key]|h}--></textarea><br />
<span class="attention"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
</td>
<!--{/if}-->

③　一番下に追加。

<!--{if $smarty.const.EDITOR_MAIN_COMMENT == "true"}-->
<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_SUB_COMMENT == "true"}-->
<!--{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}-->

④　■html/user_data/packages/admin/css/admin_contents.css　追加

/*CKeditor*/
.ckeditor_area {
position:relative;
padding-top:6px;
}
.ckeditor_area .click_ckeditor:hover,
.ckeditor_area .click_ckeditor_sub:hover {
cursor:pointer;
}
.ckeditor_area .editor {
display:none;
padding-top:25px;
}
.ckeditor_area .open {
display:block;
}
.ckeditor_area .left,
.ckeditor_area .right {
position:absolute;
top:5px;
text-align: center;
background: #EEE;
border: 1px solid #999;
padding:1px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.ckeditor_area .left {
left:5px;
}
.ckeditor_area .right {
left:200px;
}
.ckeditor_area .left:hover,
.ckeditor_area .right:hover {
background:#333;
color:#FFF;
}

6　■data/Smarty/templates/default/products/detail.tpl

の下に、