PHP头条
热点：

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


热度1 评论 155
www.PHPzy.Com  网友分享于：       浏览数4696次

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


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

第一：安装配置CKEditor

在扩展CKfinder实现图片上传之前，我们先把最基本的CKeditor编辑器安装一下。

1．  将下载的ckeditor_3.4.2.zip解压，复制目录下的ckeditor文件夹至所需目录，如/admin/。

第一：安装配置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用法 [用力点击]

 代码如下 复制代码

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>


下介绍两调用方法一种php

最后就是使用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调用的朋友可以参考一下本教程

本站原创教程转载注明来源:http://www.111cn.net/phper/php.html

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

相关文章

PHP之友评论

今天推荐