EC-CUBE EC-CUBEのカスタマイズ・制作会社　強いネットショップ構築します｜EC-Orange

EC-Orange とは
ネットショップ開業
代理店の方へ

EC-CUBE カスタマイズ

EC-CUBEインストール

EC-CUBE 環境構築ノウハウ

EC-CUBE 基本構成理解

ソースコード読解

EC-CUBE カスタマイズ：初歩

EC-CUBE カスタマイズ：基礎

EC-CUBE カスタマイズ：応用

EC-CUBE 機能拡張ノウハウ

EC-CUBE プラチナパートナー

EC-CUBE カスタマイズ    FCKeditoerの設定、エディタのリッチ化

    EC-CUBE カスタマイズ  >  EC-CUBE カスタマイズ：応用  >  エディタのリッチ化 (Confirmed with Ver.2.4!)

カスタマイズ：応用/エディタのリッチ化 (Confirmed with Ver.2.4!)

EC-CUBE管理画面のタグ入力可能なテキストエリアをWYSIWYGで編集できるようにします。
FCKeditoerの入手方法からアップロード、各種設定、テンプレートの編集など、画像付きで解説しています。

    システム開発でお悩みの方は、ネットショップ構築パッケージ EC-Orange にお問い合わせください


動作確認

ver.2.4.0rc2

説明

ここではオープンソースのWYSIWYG(What You See Is What You Get)なエディタ、FCKeditoerの日本語化版を設置します。
より直感的な編集が可能になりますが、若干動作が重くなりますので、サーバ・通信環境を考慮してお使いください。

ツールの入手

下記のリンクにアクセスして最新版をダウンロード。
（ここではFCKeditor_2.6_ja.zipを使用します）
FCKeditoerの日本語化版　ダウンロード
zipファイルを入手したら、解凍。

アップロード

解凍してできた"_documentation.html"を含むフォルダをサーバにアップロードします。この際、使用しない.aspや.pyのスクリプトファイルは削除しておくと良いでしょう。
[EC-CUBE root]/html/ 以下であればどこでも構いませんが、今回は [EC-CUBE root]/html/user_data/にアップロードします。

エディタ設定

fckconfig.jsを編集します。

// FCKConfig.ProtectedSource.Add( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
↓
FCKConfig.ProtectedSource.Add( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code

var _FileBrowserLanguage = 'php' ; ←'php'に設定。デフォルトではこれになっている。
var _QuickUploadLanguage = 'php' ; ←'php'に設定。デフォルトではこれになっている。

fckeditor.jsの編集

FCKeditorのパスを設定します。
ショップのドキュメントルート+/user_data/fckeditor/
としておきます。
http://www.hogehoge.jp/shop/
がショップのトップページなら、

FCKeditor.BasePath = '/shop/user_data/fckeditor/' ;

とします。

アップローダー設定

config.phpの編集

ファイルアップロードのサーバーサイドのスクリプト設定を行います。

/html/user_data/fckeditor/editor/filemanager/connectors/php/config.php

を編集します。

$Config['Enabled'] = true ; ←trueにする

↓アップロードしたファイルの保存先(ドキュメントルートからのパス)
$Config['UserFilesPath'] = '/shop/upload/save_image/' ;

↓アップロードしたファイルの(絶対パス)
$Config['UserFilesAbsolutePath'] = '/var/www/eccubes/html/upload/save_image/' ;

※FCKeditorのファイルアップロード機能はユーザー認証を必要としません。第三者が勝手にファイルをアップロードする事が可能なので、利用する際は注意してください。

テンプレートの編集

htmlの内で必要な時だけ呼び出すために

data/Smarty/templates/default/admin/main_frame.tpl

の < head > 〜 < /head > に以下を追加します。

<‎!--{$tpl_head_option|smarty:nodefaults}-->

pageクラスの編集

FCKeditorを使用するページのクラスを編集します

  • /data/class/pages/admin/design/LC_Page_Admin_Design_Bloc.php　194行目付近

を以下のように変更してください。 

default:
    $this->tpl_javascript .= "
    function fckeditorCreate(){
        var oFCKeditor = new FCKeditor( 'bloc_html' ) ;
        oFCKeditor.Height='420';
        oFCKeditor.ReplaceTextarea() ;
    }
   ";
    $this->tpl_head_option = 
        '<script type="text/javascript" src="'.URL_DIR.'user_data/fckeditor/fckeditor.js"></script>';
    $this->tpl_onload .= 'fckeditorCreate()';
    if(isset($_POST['mode'])) {
        GC_Utils::gfPrintLog("MODEエラー：".$_POST['mode']);
    }
    break;

  • /data/class/pages/admin/design/LC_Page_Admin_Design_MainEdit.php 230行目付近

以下のように変更してください 

$this->tpl_javascript .= "
    function fckeditorCreate(){
        var oFCKeditor = new FCKeditor( 'tpl_data' ) ;
        oFCKeditor.Height='620';
        oFCKeditor.ReplaceTextarea() ;
    }
";
$this->tpl_head_option = '<script type="text/javascript" src="'.URL_DIR.'user_data/fckeditor/fckeditor.js"></script>';
$this->tpl_onload .= 'fckeditorCreate()';

// 画面の表示
$objView->assignobj($this);

  • /data/class/pages/admin/products/LC_Page_Admin_Products_Product.php

まず以下のメソッドを追加します 

function lfSetFCKeditor(){
    $this->tpl_javascript .= "
    function fckeditorCreate(){ 
        var oFCKeditor = new FCKeditor() ;
        oFCKeditor.BasePath    = '/shop/user_data/fckeditor/' ;
        oFCKeditor.Height='420';
               oFCKeditor.InstanceName = 'main_comment';
               oFCKeditor.ReplaceTextarea() ;
        for (i = 1; i < 6; i++) {
            oFCKeditor.InstanceName = 'sub_comment'+i;
            oFCKeditor.ReplaceTextarea() ;
        }
    }
    ";
    $this->tpl_head_option .= '<script type="text/javascript" src="'.URL_DIR.'user_data/fckeditor/fckeditor.js"></script>';
    $this->tpl_onload .= 'fckeditorCreate();';
}

lfProductPage()の中を以下のように修正します。

        if (isset($_POST['image_key']) && !empty($_POST['image_key'])) {
            $anchor_hash = "location.hash='#" . $_POST['image_key'] . "'";
        } elseif (isset($_POST['anchor_key']) && !empty($_POST['anchor_key'])) {
            $anchor_hash = "location.hash='#" . $_POST['anchor_key'] . "'";
        } else {
            $anchor_hash = "";
        }

　↓ 
        if (isset($_POST['image_key']) && !empty($_POST['image_key'])) {
            $anchor_hash = "location.hash='#" . $_POST['image_key'] . "';";
        } elseif (isset($_POST['anchor_key']) && !empty($_POST['anchor_key'])) {
            $anchor_hash = "location.hash='#" . $_POST['anchor_key'] . "';";
        } else {
            $anchor_hash = "";
        }
また、lfProductPage()の最後に以下の行を追加します。 
$this->lfSetFCKeditor();
  • detail.tpl

/data/Smarty/templates/default/detail.tpl 内において、
　■ <‎p><‎!--★詳細メインコメント★--><‎!--{$arrProduct.main_comment|nl2br}--><‎/p>の部分
　■「<‎!--★サブテキスト★-->」と書かれている付近の<‎ !--{$arrProduct[$ckey]|nl2br}-->という部分が2ヶ所
　このそれぞれで"|nl2br"の文字列を取り除きます。

許可するタグの追加

管理画面のシステム設定→マスタデータ管理でmtb_allowed_tagに入力許可するタグを追加します。

スクリーンショット

  • ブロック編集
EC-CUBE_カスタマイズ-ブロック編集

  • ページ編集
EC-CUBE_カスタマイズ-ページ編集

  • 商品情報編集
EC-CUBE_カスタマイズ-商品情報編集

  • コンテクストメニュー
EC-CUBE_カスタマイズ-コンテクストメニュー

  • 文字色選択
EC-CUBE_カスタマイズ-文字色選択

  • 画像
EC-CUBE_カスタマイズ-画像

  • ファイルアップローダ
EC-CUBE_ファイルアップローダ




EC-CUBEのカスタマイズや、ECサイトの開発・構築でお困りなら、
ネットショップ構築パッケージEC-Orangeにお問い合わせください！

ページトップへ
会社概要 プライバシーポリシー お問い合わせ
©2006-2010 EC-Orange All rights reserved.