Yii整合Ckeditor和Ckfinder上传文件（让我蛋碎一下午） | 饭饭博客

作者：饭饭   发布：2012-11-22 18:39   分类： PHP, YII, 开发工具   阅读： 25 浏览数   抢沙发  

啥话不说，我要骂两个人！第一：http://www.58os.com/BBS/TechBSS/Article-1367.html,这篇文章的作者，第二：http://hi.baidu.com/layooo/item/1f289ff044de002f743c4cd4  这篇文章的作者，这两个坑爹的，写文章你要写完整呀，哪能这样坑我们这些天真的孩子呢！！！让我蛋碎一下午！！！不说了，切入正题。

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中添加 $ckFinder成员变量

3.在类CKeditorWidget中的run方法开始添加

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

4.最后修改run方法中调用的render方法的第二个数组参数，添加 “ckFinder”=>$this->ckFinder 键值对，最终的CKEditorWidget类的代码应该为类似如下内容：

01 class CKEditorWidget extends CInputWidget
02 {
03     public $ckEditor;
04     public $ckBasePath;
05     public $ckFinder;
06     public $defaultValue;
07     public $config;
08     public function run()
09     {
10         if(!isset($this->model)){
11             throw new CHttpException(500,'"model" have to be set!');
12         }
13         if(!isset($this->attribute)){
14             throw new CHttpException(500,'"attribute" have to be set!');
15         }
16         if(!isset($this->ckEditor)){
17             $this->ckEditor = Yii::app()->basePath."/../ckeditor/ckeditor.php";
18         }
19         if(!isset($this->ckFinder)){
20                     $this->ckFinder = Yii::app()->basePath."/../ckfinder/ckfinder.php";
21                 }
22         if(!isset($this->ckBasePath)){
23             $this->ckBasePath = Yii::app()->baseUrl."/ckeditor/";
24         }
25                 if(!isset($this->defaultValue)){
26             $this->defaultValue = "";
27         }
28         $controller=$this->controller;
29         $action=$controller->action;
30         $this->render('CKEditorView',array(
31             "ckFinder"=>$this->ckFinder,
32             "ckBasePath"=>$this->ckBasePath,
33             "ckEditor"=>$this->ckEditor,
34             "model"=>$this->model,
35             "attribute"=>$this->attribute,
36             "defaultValue"=>$this->defaultValue,
37             "config"=>$this->config,
38         ));
39     }
40 }

 

5.打开 项目/ckfinder/config.php，配置以下内容

$baseUrl = ‘upload/’;//上传的文件所在的根目录

$baseDir=’F:/php_dev/apache/htdocs/DvoraBlog/upload/’;//根目录所在的绝对地址

我们来看ckfinder里的config.php里的一句注视：
$baseDir : the path to the local directory (in the server) which points to the
above $baseUrl URL. This is the path used by CKFinder to handle the files in
the server. Full write permissions must be granted to this directory.

Examples:
// You may point it to a directory directly:
$baseDir = ‘/home/login/public_html/ckfinder/files/’;
$baseDir = ‘C:/SiteDir/CKFinder/userfiles/’;

// Or you may let CKFinder discover the path, based on $baseUrl.
// WARNING: resolveUrl() *will not work* if $baseUrl does not start with a slash (“/”),
// for example if $baseDir is set to  http://example.com/ckfinder/files/
$baseDir = resolveUrl($baseUrl);
大致意思 就是说 如果你baseUrl使用的是相对地址 那么resolveUrl()这个函数就废掉了，你得自己手动设置$baseDir,并给出了win下linux下的配置实例。

4.使用

在需要使用文本编辑器的时候，使用widget方式加入到页面中

01 <?php  $this->widget('ext.ckeditor.CKEditorWidget',array(
02               "model"=>$model,                 # 数据模型
03               "attribute"=>'content',          # 数据模型中的字段
04               "defaultValue"=>"Test Text",     # 默认值              "config" => array(
05                     "height"=>"400px",
06                     "width"=>"100%",
07                     "toolbar"=>"Full",#工具条全部显示，
08                      "filebrowserBrowseUrl"=>'/ckfinder/ckfinder.php'   #这里很关键，设置这个后，打开上传功能和浏览服务器功能
09                   ),
10               #Optional address settings if you did not copy ckeditor on application root
11               #"ckEditor"=>Yii::app()->basePath."/ckeditor/ckeditor.php",
12                                               # Path to ckeditor.php
13               #"ckBasePath"=>Yii::app()->baseUrl."/ckeditor/",
14                                               # Realtive Path to the Editor (from Web-Root)
15               ) );
16         ?>

到此，我都是按照我骂的第一位仁兄的方法配置的，打开页面一看，咦，激动了，出来了浏览服务器按钮，可是，但我点下去的时候蛋碎了，尼玛，是空白！！这就是我骂他的原因。

接下来我找啊找啊，终于找到一个貌似靠谱的了，也就是第二位仁兄的补充方法

在protected/extensions/ckeditor/views/CKEditorView.php下加上这一句：

1 CKFinder::SetupCKEditor($oCKeditor, Yii::app()->baseUrl .'/ckfinder/');

尼玛，这不加还好，一加果断报错。但我的感觉告诉我这位仁兄的方法靠谱，于是我看了一下错误，原来时自动加载出错。仔细分析一下，以为CKFinder是文件ckfinder下的core下的ckfinder_php5.php里的类，因为这个问价是位于protected文件夹外，所以无法自动加载。于是我在protected/extensions/ckeditor/views/CKEditorView.php里include进来ckfinder/core/ckfinder_php5.php这个问件，Ok，好了！庆贺一下！

本文固定链接: http://www.wukunfan.com/index.php/yii-ckeditor-ckfinder.html | 饭饭博客