在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 条评论
登录 后参与评论

相关文章

来自专栏分布式系统进阶

Influxdb 数据写入流程

因此对写入请求的处理就在函数 func (h *Handler) serveWrite(w http.ResponseWriter, r *http.Reque...

21230
来自专栏向治洪

JSBridge深度剖析

概述 做过混合开发的人都知道Ionic和PhoneGap之类的框架,这些框架在web基础上包装一层Native,然后通过Bridge技术的js调用本地的库。 在...

40450
来自专栏圣杰的专栏

Asp.net mvc 知多少(二)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

23180
来自专栏腾讯云API

【转】腾讯云 TCCLI 实践分享

原文地址:https://cloud.tencent.com/developer/article/1158013

19130
来自专栏白驹过隙

ZeroMQ - 三种模型的python实现

623140
来自专栏木子墨的前端日常

easyUI datagrid 清空

最近在做一个管理系统,出于一些需要,经常要将一些datagrid清空。然后easyUI本身并没有自带的方法,然后自己动手丰衣足食吧。

12230
来自专栏流柯技术学院

JMeter专题系列(三)元件的作用域与执行顺序

JMeter中共有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效...

12240
来自专栏中国白客联盟

使用sqlmap的osshell不出现盘符的解决办法

做个笔记,dba权限时,使用sqlmap的osshell时,当输入路径时,但是sqlmap迟迟不写入盘符,如图: ? 当然,试过f:\,f:\\,f:/,f...

37260
来自专栏Star先生的专栏

从源码中分析 Hadoop 的 RPC 机制

RPC是Remote Procedure Call(远程过程调用)的简称,这一机制都要面对两个问题:对象调用方式余与序列/反序列化机制。本文给大家介绍从源码中分...

77500
来自专栏Linux驱动

第1阶段——uboot分析之启动函数bootm命令 (9)

本节主要学习: 详细分析UBOOT中"bootcmd=nand read.jffs2 0x30007FC0 kernel;bootm 0x30007FC0" 中...

29490

扫码关注云+社区

领取腾讯云代金券