使用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，关键代码如下：

             

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

             

                       type="text/javascript">

                            CKEDITOR.replace('content2');

                    

        至此，默认版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文件，代码如下：

            

 

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

 

 

        3．完成后的界面如下：

 

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