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

相关文章

来自专栏linux驱动个人学习

VFS四大对象之三 struct dentry

继上一篇文章介绍了inode结构体:继续介绍目录项dentry: https://cloud.tencent.com/developer/article/105...

3836
来自专栏大数据钻研

前端开发必备!Emmet使用手册

介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称...

3248
来自专栏用户2442861的专栏

深入讲解GCC和Make的区别(有涉及makefile文件哟!!!)

gcc是编译器 而make不是 make是依赖于Makefile来编译多个源文件的工具 在Makefile里同样是用gcc(或者别的编译器)来编译程序.

852
来自专栏数据和云

你造吗,Oracle SQLplus 也有History命令了

很多时候我们只能通过SQLPlus来操作数据库,而当一个SQL执行结果太多时,我们要回翻之前的SQL语句就会很麻烦,甚至可能由于ssh客户端或SQLPlus客户...

3045
来自专栏python全栈布道师

django+vue环境搭建

npm install -g cnpm --registry=https://registry.npm.taobao.org

4448
来自专栏恰同学骚年

你必须知道的指针基础-1.预备篇:搭建GCC开发环境

  GCC(GNU Compiler Collection)是一套功能强大、性能优越的编程语言编译器,它是GNU计划的代表作品之一。GCC是Linux平台下最常...

521
来自专栏coding

sublime配置java运行环境

1365
来自专栏Sorrower的专栏

内核必须懂(一): 用系统调用打印Hello, world!

985
来自专栏阮一峰的网络日志

Bash 脚本 set 命令教程

服务器的开发和管理离不开 Bash 脚本,掌握它需要学习大量的细节。 ? set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题...

2634
来自专栏nummy

Python数据科学手册(一)【IPython入门】

输入和输出通过In/Out标签标示,实际上In和Out分别是两个变量,保存了最近的输入输出信息。可以直接通过下标获取之前的输入或者输出。

762

扫码关注云+社区