在YII項目中使用ckeditor和ckfinder快速部署文本編輯器並實現圖片上傳

     好久沒有寫技術博客，工作太忙當然不能作為理由，可能自己變得懶惰啦。

     我的個人博客，現在是暫時使用wordpress部署的，但是最終還是要自己動手開發，當然最好是不占用工作時間完成，語言當然是使用PHP，這個毋庸置疑，因為工作中大部分時間是在寫.NET代碼，擔心哪天真的就遠離了PHP啦，這可不是我個性格，怎么說，我也花過那么多Time和￥在PHP身上，當然這是玩笑，我還是深愛着它的。

    閑話少說，書歸正傳；

1.准備

    首先到http://ckeditor.com/   下載ckeditor;

    然后到http://ckfinder.com/  下載ckfinder;

   最后到http://www.yiiframework.com/extension/ckeditor-integration  下載ckeditor widget

2.安裝

將下載到的ckeditor和ckfinder的zip包，解壓到yii項目的根目錄，並將ckeditor widget解壓到yii項目的extension,形成的目錄結果如下圖所示：

 

3.配置

1.首先打開  項目/protected/extensions/ckeditor/CKEditorWidget.php

2.在類CKEditorWidget中添加 $ckFinde r成員變量

3.在類CKeditorWidget中的run方法開始添加

if(!isset($this->ckFinder)){
                    $this->ckFinder = Yii::app()->basePath."/../ckfinder/ckfinder.php";
                }

4.最后修改run方法中調用的render方法的第二個數組參數，添加 "ckFinder"=>$this->ckFinder 鍵值對，最終的CKEditorWidget類的代碼應該為類似如下內容：

class CKEditorWidget extends CInputWidget
{

    public $ckEditor;
    public $ckBasePath;
    public $ckFinder;
    public $defaultValue;
    public $config;

    public function run()
    {
        if(!isset($this->model)){
            throw new CHttpException(500,'"model" have to be set!');
        }
        if(!isset($this->attribute)){
            throw new CHttpException(500,'"attribute" have to be set!');
        }
        if(!isset($this->ckEditor)){
            $this->ckEditor = Yii::app()->basePath."/../ckeditor/ckeditor.php";
        }
        if(!isset($this->ckFinder)){
                    $this->ckFinder = Yii::app()->basePath."/../ckfinder/ckfinder.php";
                }
        if(!isset($this->ckBasePath)){
            $this->ckBasePath = Yii::app()->baseUrl."/ckeditor/";
        }
                if(!isset($this->defaultValue)){
            $this->defaultValue = "";
        }

        $controller=$this->controller;
        $action=$controller->action;
        $this->render('CKEditorView',array(
            "ckFinder"=>$this->ckFinder,
            "ckBasePath"=>$this->ckBasePath,
            "ckEditor"=>$this->ckEditor,
            "model"=>$this->model,
            "attribute"=>$this->attribute,
            "defaultValue"=>$this->defaultValue,
            "config"=>$this->config,
        ));
    }
}

5.打開 項目/ckfinder/config.php，配置以下內容

$baseUrl = 'upload/';

$baseDir='F:/php_dev/apache/htdocs/DvoraBlog/upload/';

這樣的配置，使上傳目錄設置為項目根目錄的upload文件夾，baseDir不可以使用它原始的方法得到絕對路徑，這個我還沒有發現這是一個BUG還是怎么回事，反正目前我配置為絕對路徑是可行的，這里DvoraBlog是我的項目主目錄。

4.使用

在需要使用文本編輯器的時候，使用widget方式加入到頁面中

<?php  $this->widget('ext.ckeditor.CKEditorWidget',array(
              "model"=>$model,                 # 數據模型

              "attribute"=>'content',          # 數據模型中的字段

              "defaultValue"=>"Test Text",     # 默認值              "config" => array(
                    "height"=>"400px",
                    "width"=>"100%",
                    "toolbar"=>"Full",#工具條全部顯示，
                     "filebrowserBrowseUrl"=>'/ckfinder/ckfinder.php'   #這里很關鍵，設置這個后，打開上傳功能和瀏覽服務器功能
                  ),
              #Optional address settings if you did not copy ckeditor on application root
              #"ckEditor"=>Yii::app()->basePath."/ckeditor/ckeditor.php",
                                              # Path to ckeditor.php
              #"ckBasePath"=>Yii::app()->baseUrl."/ckeditor/",
                                              # Realtive Path to the Editor (from Web-Root)
              ) );
        ?>

 

5.效果