最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > php教程 >

PHP中Ckeditor+Ckfinder配置图片上传功能

时间:2014-06-09 16:40来源: 作者: 点击:
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片,本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能。 第一:安装配置CKEditor 在扩展

从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片,本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能。

第一:安装配置CKEditor

在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下,将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/。

(1)、安装配置CKEditor,可改/admin/ckeditor/ckeditor.js来配置编辑器,如字体、背景色、语言、界面高宽、编辑器按钮分布等,代码如下:

  1. config.language = 'en'
  2. config.skin = 'v2'
  3. config.uiColor = '#AADC6E'
  4. config.toolbar = 'Basic'
  5. …. 

(2)、官方的demo大多都喜欢用js配置editor区域,习惯写php的我就嫌麻烦,只好看内置的php类,代码如下:

  1. require_once ROOTPATH . "ckeditor/ckeditor.php"
  2. $CKEditor = new CKEditor(); 
  3. $CKEditor->returnOutput = true; //设置输出可用变量的情况 
  4. $CKEditor->basePath = '/ckeditor/';//设置路径 
  5. $contentarea =  $CKEditor->editor("content"$rs['contents']); //生成一个以name为content的 
  6. textarea 
  7. echo $contentarea

页面引用CKeditor,关键代码如下

  1. <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
  2. <textarea cols="80" name="content" rows="10"></textarea> 
第二步:我们来配置安装CKfinder

CKfinder是官方组件,下载地址如下:http://ckfinder.com/download (注意:与ckeditor不是同一网站)。

(1),将下载的ckfinder_php_2.0.1.zip 解压,复制目录下的ckfinder文件夹至编辑器目录,/admin/ckeditor。

(2),需要上传了,只好加入ckfinder,把ckfinder和ckeditor放在同级目录下。

打开/ckfinder/config.php,首先设置第一个函数CheckAuthentication(),这个函数需要按照自己的规则写,只要return,true的情况才能允许上传文件到服务器的,当然不建议直接写return true,这将导致安全问题,可以采用session来处理比较方便。

我们可以简单的把子config.php这样修改,代码如下:

  1. function CheckAuthentication() 
  2. return false;//改为return false 

或者更安全的做法利用 session,代码如下:

  1. session_start(); 
  2. function CheckAuthentication(){ 
  3.     if(isset($_SESSION['UseEidtor'])) 
  4.         return true; 
  5.     else 
  6.          return  false; 

找到”$baseUrl”,这个变量定义了ckfinder文件上传的目录,将值设为”$baseurl='../data /',文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

第三步:整合,实现图片上传功能

1.在编辑器页面头部引用ckfinder.js文件,代码如下:

<script type="text/javascript" src="ckeditor/ckfinder/ckfinder.js"></script>

下面介绍调用方法,最后就是使用ckfinder,代码如下:

  1. require_once ROOTPATH . "ckeditor/ckeditor.php"
  2.     require_once ROOTPATH . 'ckfinder/ckfinder.php' ; 
  3.      
  4.      $CKEditor  = new  CKEditor(); 
  5.     $CKEditor->returnOutput = true; 
  6.     $CKEditor->basePath = '/ckeditor/'
  7.  
  8.     CKFinder::SetupCKEditor($CKEditor'/ckfinder/') ;//注意这里是相对路径,相对于根目录, 
  9. 不能用绝对路径 
  10.  
  11.     $contentarea =  $CKEditor->editor("content"$rs['contents']); 

另一种js或html页面的修改,代码如下:

  1. <script type="text/javascript"> 
  2. CKEDITOR.replace( 'editor1', 
  3. filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html', 
  4. filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Images', 
  5. filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Flash', 
  6. filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php? 
  7. command=QuickUpload&type=Files', 
  8. filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php? 
  9. command=QuickUpload&type=Images', 
  10. filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php? 
  11. command=QuickUpload&type=Flash
  12. }); 
  13. </script> 

这样就大功告成了,有想知道Ckeditor Ckfinder配置图片上传功能支持javascript html和php调用的朋友可以参考一下本教程.

(责任编辑:admin)
------分隔线----------------------------
栏目列表
推荐内容