タグ: WYSIWYG

【EC-CUBE】WYSIWYGの組み込み(FCKediter)

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

  1. FCKediterのパッケージをダウンロード&解凍してFTPでアップロード。(/html/に設置)
    (※FCKエディタのほうのファイルにも、事前に組み込み用の設定をいくつかしないといけない。下のほうに詳細を書く。)
  2. /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>

  3. 入力テンプレートの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>

  4. /admin/products/product.tpl にエディタのJS呼び出し用のJAVASCTIPTを追加する。上のほう。

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

———
FCKediter用の設定。

その1:アップロード機能。
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がセーフモードの場合にはアップロードしたファイルを保存できないので注意が必要。

その2:組み込みのカスタマイズ。→面倒なのでやらない。
 
その3: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.

【参考】

■最新版の日本語エディタ(文字変換とかチップスの表示とかが日本語化されているので使いやすく不要なエラーに遭遇しなくてすむ)
http://www.dakiny.com/archives/fckeditor/ajax_wysiwyg_editor_fckeditor_26/

■アップロード機能を正常に使うための設定とツールバーの設定についてアップされている記事
http://akira.matrix.jp/index.php?ID=58
http://akira.matrix.jp/index.php?ID=61

WYSIWYGを使えっちゅうねん。。。

http://www.fckeditor.net/
http://sourceforge.jp/projects/fckeditor/files/ (日本語ローカライズ版のダウンロードはこっち。)

FCKエディタは、大変便利で多機能なエディタです。
上記のサイトから、ダウンロードして組み込めば、編集画面が使いやすくなりますよぉ。
他にも色々エディタはありますので、好みに合わないときは、探しましょう。

最近のCMSやブログは、大抵WYSIWYGエディタ(オフィスのソフトみたいに簡単に文字を大きくしたり画像を挿入したりできるエディタ機能)がついている。

でも、中には標準ではテキスト入力しか出来ないソフトもあったりで、ドリでHTMLを書き書き編集してから、コピペするという面倒な作業だったりする。

で、WYSIWYGは、実は色々便利なエディタが配布されていて、編集画面に組み込んでしまえば、簡単編集できたり。

MTのカスタムフィールドとかオープンソースのCMSなんかで、「あ~。ここ、簡単にコンテンツ編集したいなぁ。」ってこと、結構ありますよね。

組み込みは、比較的簡単です。設定や組み込みたいソフトとの相性などで、ちょこっと難しいときもありますが・・・