在YII项目中使用ckeditor和ckfinder快速部署文本编辑器并实现图片上传1.准备2.安装3.配置4.使用5.效果

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.效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

2908
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2527
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2667
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

30810
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2622
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4808
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6638
来自专栏落花落雨不落叶

canvas画简单电路图

59111
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2506
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4688

扫码关注云+社区