您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

Yii EClientScript 擴充完整指南：CSS/JS 合併壓縮、快取策略與 KindEditor 整合實戰

編輯：PHP 綜合知識

前言

Yii 內建 CClientScript 功能基礎，無法自動合併、壓縮 CSS/JS。EClientScript 透過繼承核心類別，提供檔案合併、內容壓縮、快取管理三大功能，大幅減少 HTTP 請求數與傳輸體積。本文涵蓋安裝配置、工具類封裝、視圖調用、KindEditor 整合四大實戰場景。

一、安裝與配置

1. 下載並放置

# 解壓至 protected/vendor/
protected/vendor/yii-EClientScript/EClientScript.php

2. 主配置檔啟用

// protected/config/main.php
'components' => array(
    'clientScript' => array(
        'class' => 'application.vendor.yii-EClientScript.EClientScript',
        'combineScriptFiles' => true,      // 合併 JS
        'combineCssFiles'  => true,        // 合併 CSS
        'optimizeScriptFiles' => !YII_DEBUG, // 正式環境壓縮 JS
        'optimizeCssFiles'  => !YII_DEBUG, // 正式環境壓縮 CSS
        'optimizeInlineScript' => false,   // 內聯 JS 壓縮（可能導致錯誤）
        'optimizeInlineCss'  => false,     // 內聯 CSS 壓縮
    ),
),

二、工具類封裝統一註冊介面

// protected/components/Unit.php
class Unit {
    /** 註冊 JS 檔案 */
    public static function jsFile($file, $position = CClientScript::POS_HEAD, $media = array()) {
        $cs = Yii::app()->getClientScript();
        $cs->registerScriptFile($file, $position, $media);
    }

    /** 註冊 CSS 檔案 */
    public static function cssFile($file, $media = '') {
        Yii::app()->getClientScript()->registerCssFile($file, $media);
    }
}

三、視圖中調用範例



// IE 條件式 CSS
Unit::cssFile('/css/ie6.css', 'lte IE 6');
// 輸出：

// 一般 JS
Unit::jsFile('/js/jquery.lazyload.js');
// 輸出：

// IE 條件式 JS（POS_HEAD + media 參數）
Unit::jsFile('/js/ie9.js', CClientScript::POS_HEAD, array('media' => 'lt IE 9'));
// 輸出：
?>

四、KindEditor 整合實戰（含圖片上傳、檔案管理）

1. 擴充結構

protected/extensions/KEditor/
├── KEditor.php           # 主 Widget
├── KEditorManage.php     # 檔案管理 Action
├── KEditorUpload.php     # 上傳處理 Action
└── keSource/             # KindEditor 原始碼
    ├── kindeditor.js
    ├── themes/
    └── plugins/

2. 主 Widget 核心邏輯

class KEditor extends CWidget {
    public $model;
    public $name;
    public $properties = array();      // KindEditor 配置
    public $textareaOptions = array(); // textarea 屬性

    public function init() {
        $this->baseUrl = Yii::app()->assetManager->publish(dirname(__FILE__).'/keSource');
        $cs = Yii::app()->clientScript;
        $cs->registerCssFile($this->baseUrl.'/themes/default/default.css');
        $cs->registerScriptFile($this->baseUrl.'/'.(YII_DEBUG?'kindeditor.js':'kindeditor-min.js'));
    }

    public function run() {
        $options = $this->getKeProperties(); // 過濾允許的配置鍵
        $js = "KindEditor.ready(function(K) {
            var editor_{$this->id} = K.create('#{$this->id}', " . CJavaScript::encode($options) . ");
        });";
        Yii::app()->clientScript->registerScript('KE_'.$this->name, $js, CClientScript::POS_HEAD);

        echo CHtml::activeTextArea($this->model, $this->name, $this->getTextareaOptions());
    }
}

3. 上傳 Action（KEditorUpload）

class KEditorUpload extends CAction {
    public function run() {
        $dir = isset($_GET['dir']) ? $_GET['dir'] : 'file';
        $extMap = array(
            'image' => array('gif','jpg','jpeg','png','bmp'),
            'flash' => array('swf','flv'),
            'media' => array('swf','flv','mp3','wav','wma','wmv','mid','avi','mpg','asf','rm','rmvb'),
            'file'  => array('doc','docx','xls','xlsx','ppt','htm','html','txt','zip','rar','gz','bz2'),
        );

        $file = CUploadedFile::getInstanceByName('imgFile');
        if ($file) {
            $ext = strtolower($file->extensionName);
            if (!in_array($ext, $extMap[$dir])) {
                echo CJSON::encode(array('error'=>1, 'message'=>'副檔名不允許'));
                return;
            }
            $savePath = KEditor::getUploadPath() . "/$dir/" . date('Ymd');
            if (!is_dir($savePath)) mkdir($savePath, 0777, true);
            $fileName = date('His') . '_' . rand(10000,99999) . ".$ext";
            $file->saveAs($savePath . '/' . $fileName);
            echo CJSON::encode(array('error'=>0, 'url'=>KEditor::getUploadUrl()."/$dir/".date('Ymd')."/$fileName"));
        } else {
            echo CJSON::encode(array('error'=>1, 'message'=>'未收到檔案'));
        }
    }
}

4. 檔案管理 Action（KEditorManage）

掃描上傳目錄回傳 JSON 結構供 KindEditor 檔案管理器使用（程式碼略，參考原始碼）。

5. 控制器掛載 Action

public function actions() {
    return array(
        'upload'      => 'application.extensions.KEditor.KEditorUpload',
        'manageJson'  => 'application.extensions.KEditor.KEditorManage',
    );
}

6. 視圖使用

widget('ext.KEditor.KEditor', array(
    'model' => $model,
    'name' => 'content',
    'properties' => array(
        'uploadJson' => '/admin/default/upload',
        'fileManagerJson' => '/admin/default/manageJson',
        'allowFileManager' => true,
        'newlineTag' => 'br',
        'afterCreate' => 'js:function() { $("#len").val(this.count()); }',
        'afterChange' => 'js:function() { $("#len").val(this.count()); }',
    ),
    'textareaOptions' => array('style' => 'width:98%;height:400px;'),
)); ?>