2012年10月3日カテゴリー:

EC-CUBE2.12:テキストエリアにCKeditor(WYSIWYG)を設置

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

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

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

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

[php]
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:使用しない)’)
[/php]

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

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フォルダ
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 追加

[php]
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に変更
};
[/php]

4 ダウンロードしたファイルを修正

(1)■html/user_data/editor/ckfinder/config.php
下記2カ所を変更

[php]
return false; → return true;

$baseUrl = ‘/ckfinder/userfiles/’; → $baseUrl = ‘http://’.$_SERVER[“SERVER_NAME”].dirname($_SERVER[‘PHP_SELF’]).’/upload/’;
[/php]

※ アップロードしたファイルは、下記フォルダに保存されるようになる。
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
~に以下を追加。

[php]








[/php]

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

[php]


↓(変更)

テキストエディタを使用しない

テキストエディタを使用する

background-color: ;“>

(上限文字)

テキストエディタを使用する場合は、パラメータ設定のEDITOR_MAIN_COMMENTをtrueにしてください。


[/php]

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

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

[php]


right”>テキストエディタを使用する
(上限文字)

テキストエディタを使用する場合は、パラメータ設定のEDITOR_SUB_COMMENTをtrueにしてください。

↓(変更)





>



[/php]

一番下にスクリプトを追加する
[php]






[/php]