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

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

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

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の関係だと思うのですが、無知だったので気付くまで結構、時間がかかりました。
気をつけましょう。

総括

こんな簡単にこういう機能が追加できるというのは、時代の進化でしょうか。

色々な解説を見ても、なんとなく難しそうな感じがしても、やってみると簡単だったということが、最近多いです。
やらずぼったくりという意味とは違いますが、やっておいたほうが得というのは明白になっています。

今回の機能も、個人的にはタグが打てるので追加する必要もなかったのですが、経験としてやってみました。
そして、簡単だったと感じました。

こういうものの積み重ねが、新しい技術へ踏み込む力となればいいのでしょうね。

Be the first to comment

Leave a Reply

Your email address will not be published.


*