HOME の中の
レポート の中の
EC-CUBE の中の
EC-CUBEの商品詳細をWYSIWYGエディタ(CKEditor)にするモジュール
編集を簡単に、より美しくCKEditor for EC-CUBE

レポート

EC-CUBEの商品詳細をWYSIWYGエディタ(CKEditor)にするモジュール
編集を簡単に、より美しくCKEditor for EC-CUBE

Jul. 28, 2010

このエントリをはてなブックマークに追加
EC-CUBEの商品詳細の管理画面を簡単にWYSIWYGエディタ(CKEditor)にするモジュール

EC-CUBEの商品詳細の管理画面を簡単にWYSIWYGエディタ(CKEditor)にするモジュール

商品管理ページの詳細データの入力欄は、HTMLのタグ入力ができますが、ここでHTMLタグを入力して管理するのは意外と面倒です。かといって市販のエディタソフトで一旦編集してからソースをコピペするのも面倒です。そんなことを思って、一層のこと入力欄にWYSIWYGエディタを適用させようと考えました。WYSIWYGエディタならHTMLタグの知識がない人でも、簡単に文字の大きさや色、表組みなどを作ることができます。

また、より簡単にWYSIWYGエディタを導入するために、EC-CUBEソースのカスタマイズ等の作業を不要とし、単にモジュールファイルのアップロードだけで、EC-CUBEの商品詳細にWYSIWYGエディタが適用される仕組みを採用してみました。

適用イメージ

CKEditor for EC-Cube適用イメージ

動作環境

「EC-CUBE」(ver 2.4.4)の標準構成についてのみ動作を確認しております。

「CKEditor」「CKFinder」の動作については、それぞれの提供する動作環境に準拠します。

ブラウザ
  • Internet Explorer 6.0+
  • Firefox 2.0+
  • Safari 3.0+
  • Google Chrome
  • Opera 9.5+
  • Camino 1.0+
サーバーサイド
  • PHP4.3+ ( PHP 5.x と PHP 6.x 含む )
  • Safe mode off
  • GDモジュールが必要

設置方法

1. ファイルの上書き

「CKEditor for EC-CUBE」をダウンロードしてZipファイルを解凍し、内容ファイルをFTPサーバーの「EC-CUBE」の設置ディレクトリに上書きしてください。(この際、すでにカスタマイズしてあるファイルが存在する場合は、上書きによる変更ファイルを必ずご確認下さい。)

2. パーミッションの変更

FTPサーバーで上書きしたファイルのうち、下記のディレクトリのパーミッション(権限)を「757」または「777」(サーバーにより異なります)に変更してください。

[ (設置ディレクトリ)/html/userfiles ]

3. 許可タグの追加

「EC-CUBE」の管理画面を開き、「システム設定 > マスターデータ管理」で「mtb_allowed_tag」を選択し、下記のタグを追加してください。

span, /span, em, /em, tbody, /tbody

ライセンスについて

「LGPLライセンス」の定義に基づきご利用される場合は、非商用、商用問わず無償でご利用できます。

「CKEditor」「CKFinder」のご利用については、それぞれの提示する利用条件をご確認ください。

ダウンロード


日本電子工藝社の特徴を知る。
日本電子工藝社とは?
お知らせを見る。
日本電子工藝社からのニュース・イベントを配信しています。
利用規約
www.jeia.co.jpのサイトにおけるご利用規約をご説明しています。
BLOGを見る。
Twitterと連動した「つぶやき型ブログ」を配信していいます。