WYSIWYG – B豚の備忘録 | EC-CUBEやWORDPRESS、オープンソースの情報メモ

EC-CUBE

【EC-CUBE】WYSIWYGの組み込み（FCKediter）

商品の詳細情報入力にWYSIWYGを組み込む。

FCKediterのパッケージをダウンロード&解凍してFTPでアップロード。（/html/に設置）
（※FCKエディタのほうのファイルにも、事前に組み込み用の設定をいくつかしないといけない。下のほうに詳細を書く。）
/admin/main_frame.tpl にJSの読み込みリンク記述。

<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/file_manager.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/jquery.js”></script>
<script type=”text/javascript” src=”<!–{$smarty.const.URL_DIR}–>fckeditor/fckeditor.js”></script>
入力テンプレートのtextareaにエディタの組み込みタグを入れる。
/admin/products/product.tpl の入力エリアにID属性を追加。
idの値がname属性と同じになるように、ID属性を追加する。

<tr>
<td bgcolor=”#f2f1ec” width=”160″ class=”fs12n”>詳細-メインコメント<span class=”red”>(タグ許可)*</span></td>
<td bgcolor=”#ffffff” width=”557″ class=”fs10n”>
<span class=”red12″><!–{$arrErr.main_comment}–></span>
<textarea id=”main_comment” name=”main_comment” value=”<!–{$arrForm.main_comment|escape}–>” 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|escape}–></textarea><br /><span class=”red”> （上限<!–{$smarty.const.LLTEXT_LEN}–>文字）</span></td>
</tr>
/admin/products/product.tpl にエディタのJS呼び出し用のJAVASCTIPTを追加する。上のほう。

<script type=”text/javascript”>
$(function(){
var oFCKeditor = new FCKeditor( ‘main_comment’ ) ;
oFCKeditor.ToolbarSet = ‘ECCUBE’ ;
oFCKeditor.ReplaceTextarea() ;
});
</script>

———
FCKediter用の設定。

その１：アップロード機能。
fckconfig.jsの以下の部分を修正する。

var _FileBrowserLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘php’ ; // asp | aspx | cfm | lasso | php

FCKConfig.LinkUpload = false ;

FCKConfig.ImageUpload = false ;

FCKConfig.FlashUpload = false ;コネクターにはPHPを使う。
そして、アップロードタブは表示しない。アップロードタブで選択するアップローダにはバグがあり、目的のフォルダにアップロードできない。

editor/filemanager/browser/default/connectors/php/config.phpの以下の部分を修正する。

$Config[‘Enabled’] = true ;

// $Config[‘UserFilesPath’] = ‘/UserFiles/’ ;コネクターを使用可にする。
アップロードディレクトリを動的に指定できるようにする。

アップロードディレクトリ
アップロードディレクトリを作成しておく。Webサーバが更新できるよう、アクセス権を設定しておく。PHPやCGIでユーザ別のディレクトリを作成する場合も、同様にアクセス権を設定させる。

FCKeditorのファイルマネージャは、指定されたアップロードディレクトリ上に、自動的にタイプ別のサブディレクトリを作成する。
このため、PHPがセーフモードの場合にはアップロードしたファイルを保存できないので注意が必要。

その２：組み込みのカスタマイズ。→面倒なのでやらない。

その３：fckconfig.jsに、テーマを追加する。
defoultの記述をコピーしてECCUBEという名称で作成。（ボタンの数や並びは適宜修正すること）

↓これだけ分のコードをコピペで複製してDefaultをECCUBEに変更。
FCKConfig.ToolbarSets[“Default“] = [　
[‘Source’,’DocProps’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’],
[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’,’-‘,’Print’,’SpellCheck’],
[‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
[‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
‘/’,
[‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’-‘,’Subscript’,’Superscript’],
[‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’],
‘/’,
[‘Style’,’FontFormat’,’FontName’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘FitWindow’,’ShowBlocks’,’-‘,’About’] // No comma for the last row.