PHP中Ckeditor+Ckfinder配置图片上传功能
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片,本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能。
第一:安装配置CKEditor
在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下,将下载的ckeditor_3.4.2.zip解压，复制目录下的ckeditor文件夹至所需目录，如/admin/。
(1)、安装配置CKEditor，可改/admin/ckeditor/ckeditor.js来配置编辑器，如字体、背景色、语言、界面高宽、编辑器按钮分布等,代码如下:
config.language = 'en' ; config.skin = 'v2' ; config.uiColor = '#AADC6E' ; config.toolbar = 'Basic' ; ….(2)、官方的demo大多都喜欢用js配置editor区域,习惯写php的我就嫌麻烦,只好看内置的php类,代码如下:
require_once ROOTPATH . "ckeditor/ckeditor.php" ; $CKEditor = new CKEditor(); $CKEditor ->returnOutput = true; //设置输出可用变量的情况 $CKEditor ->basePath = '/ckeditor/' ; //设置路径 $contentarea = $CKEditor ->editor( "content" , $rs [ 'contents' ]); //生成一个以name为content的 textarea echo $contentarea ;页面引用CKeditor,关键代码如下
< script type = "text/javascript" src = "ckeditor/ckeditor.js" > </ script > < 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这样修改,代码如下:
function CheckAuthentication() { return false; //改为return false }或者更安全的做法利用 session,代码如下:
session_start(); function CheckAuthentication(){ if (isset( $_SESSION [ 'UseEidtor' ])) return true; else return false; }找到]$baseUrl],这个变量定义了ckfinder文件上传的目录，将值设为]$baseurl='data /',文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。
第三步：整合,实现图片上传功能
1．在编辑器页面头部引用ckfinder.js文件,代码如下：
<script type="text/javascript" src="ckeditor/ckfinder/ckfinder.js"></script>
下面介绍调用方法,最后就是使用ckfinder,代码如下:
require_once ROOTPATH . "ckeditor/ckeditor.php" ; require_once ROOTPATH . 'ckfinder/ckfinder.php' ; $CKEditor = new CKEditor(); $CKEditor ->returnOutput = true; $CKEditor ->basePath = '/ckeditor/' ; CKFinder::SetupCKEditor( $CKEditor , '/ckfinder/' ) ; //注意这里是相对路径，相对于根目录， 不能用绝对路径 $contentarea = $CKEditor ->editor( "content" , $rs [ 'contents' ]);另一种js或html页面的修改,代码如下:
< script type = "text/javascript" > CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html? Type = Images ', filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html? Type = Flash ', filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php? command = QuickUpload & type = Files ', filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php? command = QuickUpload & type = Images ', filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php? command = QuickUpload & type = Flash ' }); </ script >这样就大功告成了，有想知道Ckeditor Ckfinder配置图片上传功能支持javascript html和php调用的朋友可以参考一下本教程.
查看更多关于PHP中Ckeditor+Ckfinder配置图片上传功能 - php上传下载的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did29391