EC-CUBEに設置したCKEditorに画像アップ機能を追加

2012年4月19日 20:35

CKEditor,javascript,Smarty,ver.2.11

先日、ECCUBEの小技：WYSIWYGエディタ『CKEditor』を管理画面に設置にてエディタを追加しました。

今回はそのエディタに対し、画像アップロード機能と、無駄なボタンの削除を行いたいと思います。
結構、手間取るかと思いましたが、何とかなりました。

この記事は最終更新日から1年以上が経過しています。

CKFinderのダウンロード

前回使ったのがCKEditorで、今回はCKFinderです。
いわゆる、プラグインのようなものでしょうか、同じ会社が作ってますし。

では、以下よりダウンロードしましょう。
CKFinderダウンロードとアップロード

TOPページのメニュー部の下、『Download now』ボタンを押しましょう。
すると、ダウンロードページへ。
『Download zip』ボタンを押せば、ダウンロード開始となります。

解凍すると、ckfinderというフォルダになるので、そのままアップしましょう。
/html/js/　内に放り込んでください。

これで、ダウンロードとアップロードの完了です。

ファイルの調整

参考記述：WYSIWYGエディタ選考会にて、CKEditorを評価してみました。 | motooLogue

/html/js/ckfinder/config.php
33行目を falese から true へ

return true;

同じく63行目　画像保存先フォルダ指定(変えなくても構いません)

$baseUrl = '/ckfinder/userfiles/';

/data/Smarty/templates/admin/main_frame.tpl
49行目付近に以下を追加

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/ckfinder/ckfinder.js"></script>

/data/Smarty/templates/admin/products
274行目付近、詳細-メインコメント部分を以下に書き換え

<tr>       
	<th>詳細-メインコメント<span class="attention">(タグ許可)*</span></th>
	<td>
	<span class="attention"><!--{$arrErr.main_comment}--></span>
		<textarea id="ckeditor" class="ckeditor"  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 />
		<script type="text/javascript">// <![CDATA[
		        CKEDITOR.config.toolbar = [
		            ['Source','Preview','Templates'],
		            ['Undo','Redo'],
		            ['Bold','Italic','Underline'],
		            ['Image','Link','Unlink'],
		            ['Styles','Format','FontSize'],
		        ];
		        var editor = CKEDITOR.replace('ckeditor');
		        CKFinder.setupCKEditor(editor, '/ec/html/js/ckfinder/');
		//]]></script>
	<span class="attention"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
	</td>
</tr>

ちょっと解説。
スクリプト部分のコードを見てください。
ここで　CKEDITOR.config.toolbar　というので表示したいボタンを指定してますね。
今で十分とは思いますが、物足りない人はどこかでボタンの指定を探して、やってみてください。

CKFinder.setupCKEditor(editor, ‘/ec/html/js/ckfinder/’);　この一文。
指定が　/ec/html/js/ckfinder/　となっていますが、これは人によって指定が代わるはずです。
ここを間違えると、画像がアップできなくなるので、何度もやり直しましょう。

あと、スクリプトの記述の位置なのですが、textareaタグの真下になりました。
本当は上に設置してたのですが、なぜか画像アップ機能が表示されなかったので、下にしました。

IDとかclassの関係だと思うのですが、無知だったので気付くまで結構、時間がかかりました。
気をつけましょう。