首先我们明确一点，图片要想显示，那么这张图片肯定有URL指向，意思就是说这张图片要么它就在你的服务器上，要么就在网上（…废话……），明确了这一点那我们就可以解释为什么我们需要CK做到图片上传的功能，因为只有上传上去的图片文件才能被调用。
本身FCKeditor是具有图片上传功能的，但是发布CK的公司将FCK重写后将之分成了两块，一个是CKEditor，一个是CKFinder。CKFinder(之后简称CKF)是个很有意思的插件，它与我之前所设想做的毕业设计不谋而合……它是一个轻量级的文档管理插件，可以单独使用进行简单而功能完善的文件管理（这一点体现了将CK和CKF分离式多么的明智），它实际的使用效果如下：
即可以单独的文件管理又可以整合CK，CKF无疑是我们完善CK功能兼之自娱自乐的绝佳工具。同CK一样，我们先下载一个CKF的最新版本，地址是http://ckfinder.com/download，它分了php,jsp,.net等语言种类，其实这并没有什么影响，只跟你所使用的空间能解析的语言有关，因为进行文件上传毕竟需要服务器端语言实现。
这里我下载了php版本，删除其中_sample等文件，只留下core一个文件夹(该文件夹中的help在我zend studio中显示有错误，我直接删了，貌似没有影响…)，单独的文件只需要留下config.php，ckfinder.js,ckfinder.html，ckfinder.php四个文件那就好了，剩余大小到700k以下，可以说是相当小了，我习惯把它放到网站中ckeditor文件夹下，表示他们同根同源。
下面我们进行使用，CKFinder的配置资料真可谓是少之又少，最后我还是在cksource的网站上看了满站的英文才自己弄明白一点的，看到这篇ZDcs自撰的文章的同学有福了，这是ZD的血泪经验用了一整天的时间才总结出来的…汗…
同CK一样，我们只需要引入它的JS核心文件即可：
<script type="text/javascript" src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js"></script>
Src中是必须正确的源，这里只是我的参考。
真正单独使用CKF的话，我们只需要实例化CKfinder的类，然后进行basepath设定就好了，但因为Ck与CKF同根同源，这些步骤可以省略，直接我们进入CK配置，添加关于CKfinder的属性设定，比如filebrowserBrowseUrl，等，具体如下：
$(function(){
CKEDITOR.replace( 'editor1',
{
//查看CK源码得知浏览服务器按钮有个这种属性指点击后启用的URL，这里指载入CKfinder
filebrowserBrowseUrl : '/ckfinder/ckfinder.html'，
//点击CK图片按钮时浏览服务器按钮浏览图片存储的文件夹
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
//点击flash按钮时浏览服务器按钮浏览图片存储的文件夹
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
//指启用上传，并指定上传文件调用的php文件
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
//上传图品文件时调用的php文件
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
//上传flsh时调用的php文件
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'，
});
})
这些文件请指向正确的文件路径
具体CKfinder的机理我就不说了，有兴趣的可以去看下它的源码。
不知道是为了防盗、宣传还是如何，它的文件调用烦人的很，比如使用CKF时有一个CkF的宣传框会显示，需要点击hide按钮才能取消，为了去掉这个恼人的广告条，我翻查了所有文件，发现ckfinder.html调用到了CKfinder文件夹中core文件夹下pages中的一个叫ckffiles.html的文件做表格填充，其中一个td标签的id是“qu”，后来证明就是放置这个内容的容器，然后找啊找，最后找到core下js文件夹中一个叫ckfinder_gecko.js文件是做这一块的数据填充，通过查找getElementByid（‘qu’），这个语句，一寸一寸翻着个文件，才发现一句{en.call(window,qo);};eF.appendChild(D)，其中en.call（window，qo）就是做这个语句填充的，注释掉这个函数就可以去除CKfinder的广告条了，之所以写这么啰嗦详细，一方面是同大家分享一下我如何修改这些东西的经验，另一方面是鄙视一下这个广告栏隐藏的那么深…
话不多说，依然回到之前写的代码，在CK的函数中这些属性添加可以很明显地看到，image、falsh所调用的文件就是CKfinder，意思就是我通过CKfinder做image和falsh的管理。
这时候点开CK中的图片框按钮时出现的弹出层添加图片源旁边会出现浏览服务器的按钮，点开后就是CKF了，当然只是这样或许还看不到如何，或者更可能显示的是无法找到网页等错误信息，这时候我们来进行CKfinder的设定。
CKF的设定文件在config.php中，里面拥有很好的注释，当然，是英文的有时间我会做下翻译然后发出来给大家分享，现在先简要说明一下，首先，第一个遇到的是函数CheckAuthentication()，这个函数原意是做使用者的身份验证，就是看使用者是否登录，然后可以以登录的身份设定不同权限，默认返回FALSE，表示没有登录，当返回FALSE时，CKfinder就不会开放功能，这是个很好的设置，为文件上传的安全性提供了解决方法，我们可以在这里加上自己的验证方式，可以通过session看用户身份，然后决定是否具有上传权限什么的，为了方便我就没有设置了，直接将返回值改为ture，先开启功能再说，当然，我自己也并不推荐直接更改返回值。
之后我们设置一下$baseUrl和$basedir。这个需要认真解释一下,默认都是/ckfinder/userfile/文件夹，$baseUrl是指读取文件的URL，是会自动填充到源文件框中的路径，可以是网络路径，在这里我设为我的一个叫shanmei站点的image文件夹（这个文件夹必须与后面说的$basedir指定同一文件夹）,设置为http://localhost/shanmei/image/；$basedir是CKF读取的文件夹的路径，只能为物理路径,这里我设置为/shanmei/image/,意为本盘下shanmei文件夹中的image文件夹，实际上和上面的文件夹是同一个，该文件夹中将自动生成images和flash两个文件夹，分别用来存储image和flash文件，还会生成一个_thumes文件夹用来存储images的缩略图。
为什么要这样区分两个参数呢？实际上添加图片后点击查看源文件就可以看到，图片实际上是一个img标签
<img src=”http://localhost/shanmei/image/images/01.jpg” />
注意到了吗？前面的http://localhost/shanmei/image/就是我指定的$baseUrl,而$basedir则只是CKF用于读取文件的指定文件夹而已，当图片放在网络前端显示，跟开始说的CK参数传递机制一样，图片就是这样一串代码，使用带http的URL无疑比使用相对路径更为可靠。
再下来我们会看到一些$config数组文件，存储CFK的部分设定，很容易看懂,如$config[Thumbnails]用于设置缩略图的部分限制，比如设置缩略图的最大宽度高度等，$config['Images']用于限定上传图片最大宽度高度等，$config['AccessControl']用于设定访问权限，结合前面的登录判定函数设定该用户是否有创建文件夹等权限，$config['ResourceType']用于设定各类文件的上传限制，文件种类是通过之前调用php时传参connector.php?command=QuickUpload&type=Files中的type决定调用哪类限制的，比如：
$config['ResourceType'][] = Array(
'name' => 'Files', //类别名为Filles
'url' => $baseUrl . 'files', //取该类别文件的URL
'directory' => $baseDir . 'files',//存储该类别文件的文件夹
'maxSize' => 0, //限制该类别文件可上传最大值
'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,zip', //该类别文件允许上传的文件类型
'deniedExtensions' => '' ， //该类别文件禁止上传的文件类型;
）
其他诸如images的同理，还有其他的属性我就不赘述了，回头我翻译了发个中文的到网上大家看哈。
上诉所有动作完成后我们的在线编辑器就可以完全开始工作了
无论是图文混编还是加入表格等操作，样样手到擒来，图片也能够实现上传功能，CKfinder的文件管理真的很强大，性能也自不必多说，大家花点时间读完我的笔记，相信同样会爱上这款优秀的在线文本编辑器的，也相信它会成为我们web开发漫漫路上的一大利器。
