使用Ckeditor+Ckfinder完成图片上传

        在介绍CKEditor之前，首先要了解Fckeditor。FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器，具有轻量化，安装配置的特点，能够和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java等不同的编程语言相结合。“FCKeditor”名称中的“FCK”是这个编辑器的作者的名字Frederico
Caldeira Knabben的缩写。

        FCKEditor在09年发布更新到3.0，并改名为CKEditor。这就是CKEditor的来源。现在叫CK，意指"Content
and Knowledge"。新版的编辑器的更新包括：新的用户界面，一个支持Plug-in的Javascript API，并提供对视觉障碍者的使用支持。"

        据官方的解释，CK是对FCK的代码的完全重写，而且此项工作从2007年就开始了，并在今年初发表了多个测试版。至此，为大家服务长达6年的FCKeditor将被CKeditor替代。

        CKeditor是完全基于插件，它通过扩展组件以符合具体需求，其主要的特点是：Open Source、Community driven、Fully customizable、Enriches website experience、High standard of quality、Free。不过，有点不如意的是，常见的文件上传功能是默认没有的，要实现图片上传，则需要由另一扩展个组件
CKFinder。

        下面从具体的例子开始，使用Ckeditor+Ckfinder实现图片的上传功能。

        一、Ckeditor的安装与配置

       
1．下载、安装和配置CKEditor

       打开http://ckeditor.com/download此页面，找到一个版本下载，此处，下载的是ckeditor_4.3.2_full.zip。

       将下载的ckeditor_4.3.2_full.zip解压，复制目录下的ckeditor文件夹至一个项目目录下，假如此处的项目文件为：Online_homework，则完成后的目录为：Online_homework\ckeditor。

 

        2．在页面引用CKeditor，关键代码如下：

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

        3．在需要嵌入编辑器的地方引用如下代码：

              <textarea id="content2" name="tmda"></textarea>

                     <script  type="text/javascript">

                            CKEDITOR.replace('content2');

                     </script>

        至此，默认版CKeditor就已经安装部署好了。

 

        二、CKfinder的安装与配置 

        CKfinder是官方组件，（注意：与ckeditor不是同一网站）。http://cksource.com/ckfinder/download 

        1．将下载的ckfinder_php_2.4.1.zip解压，复制目录下的ckfinder文件夹至编辑器目录，Online_homework\ckeditor\ckfinder。

        2．Ckfinder默认配置是不能上传文件到服务器的，所以要对ckfinder文件下的config.php做修改，将其文件里的CheckAuthentication()返回值return
false 改为return true。

          

function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...

// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file.

//return false;
return true;
}

 

        3．设置文件上传路径。打开上一步中的config.php文件，找到”$baseUrl”，这个变量定义了ckfinder文件上传的目录，根据自己的需求设置。文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

$baseUrl = '/ckfinder/userfiles/';
//$baseUrl = '../uploads/';

/*
$baseDir : the path to the local directory (in the server) which points to the
above $baseUrl URL. This is the path used by CKFinder to handle the files in
the server. Full write permissions must be granted to this directory.

Examples:
// You may point it to a directory directly:
$baseDir = '/home/login/public_html/ckfinder/files/';
$baseDir = 'C:/SiteDir/CKFinder/userfiles/';

// Or you may let CKFinder discover the path, based on $baseUrl.
// WARNING: resolveUrl() *will not work* if $baseUrl does not start with a slash ("/"),
// for example if $baseDir is set to  http://example.com/ckfinder/files/ $baseDir = resolveUrl($baseUrl);

ATTENTION: The trailing slash is required.
*/
$baseDir = resolveUrl($baseUrl);

 

        三、整合，实现图片上传功能

 

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

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

 

        2．在编辑器textarea下面引用如下代码：

 

<textarea  id="content1" name="tmnr"></textarea>
<script	type="text/javascript">
CKEDITOR.replace('content1',{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>

 

        3．完成后的界面如下：









 

        到这里，基本完成一个默认配置的上传图片的功能。在这里需要说明的是：由于CKFinder 是收费的，所以还需要破解一下，网上有，可以找到的，这里有一个地址：http://kingplesk.org/2012/11/php-ckeditor%E6%95%B4%E5%90%88ckfinder-2-3-%E7%A0%B4%E8%A7%A3/。