ckeditor ckfinder使用笔记

　　最近搞自己的CMS（内容发布系统），众所周知，CMS中很重要的是文本内容的发布，html中textarea标签即是做大型文本的专用标签，但是简单的 textarea既不美观功能也不强大，面对图文混编、文字效果设置更加是无能为力，因此，一款优秀的在线文本编辑器进入了我的视线——CKEditor。

　　原来使用过FCKeditor，功能相当完善，在业内性能评价也不错，分别有php等各语言版本，通过实例化fckeditor类来引用该编辑器，而近年来的web中胖客户端的发展提供了引用问题的另一个解决方法，因此，该公司于09年发布了CKEditor（之后简称CK），CK用JavaScript（之后简称js）重写了编辑器，通过js引用实现编辑器调用，其中好处不言而喻，不再赘言（想知道自己使用下就知道了，使用js一个调用方便，一个传参清晰，很容易体现好处），今天做好了CMS的新闻编辑模块，写下笔记，大家分享。

　　我是使用一个弹出层做文本编辑器的容器，用的是simpleModel做的，非常小巧好用的ui插件，^o^，图片中的文本编辑区就是CK，是，下载出来 有三种皮肤，图片中是default，另外还有office和v2形式，有尝试的自己看哈，office比较像word形式，v2的话觉得简明但略显古板。

　　具体使用方法：

　　下载好CK之后（现在最新版本是3.2.1，有1.7M左右），下载网址 http://ckeditor.com/download，下载完后1.7M的文件解压后4.83M，其中有很多可以简化删除，比如：_sample，用于放置CK的示例文件可删；_source,用于放置CK的源文件，等于是一个备份,可删；aptarner，就存储了一个jQuery的核心，因为我本身就有jQuery的调用，所以也删了；lang,存储了语言文件，保留zh_cn.js和en.js就可以了，可部分删除；其他单独的文件实际上只需要留下config.js（配置文件），ckeditor.js（核心文件）等重要文件就好了，什么.htaccess，是做访问列表的可以通过设定启用与INSTALL.html什么的都可以删掉，删删改改后留下的ckeditor就是800多K，功能完善，需要解释一下的是plugins文件夹存储的是CK的插件文件，有兴趣可以看看，部分按钮功能，如图片按钮，flash按钮设定都在里面，可以通过这些的修改改进功能。

　　现在我们有了简化的CK，将之放网站根目录下就可以使用了，使用方法很简单，直接调用外部js，

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

Src一定要是正确的路径，否则，无法显示。

　　从CK的DEMO中可以看到有两种方法进行编辑器的调用，当然前提是有个表单<form id=”news_add_form” action=”#” method=”post”>，然后在表单中中建立一个textarea标签，textarea中可添加文本，而这些文本会在载入时自动进入CK编辑区中，标签建立好后，就可以开始用编辑器进行替换了，第一种可以用在标签项中添加属性class=“ckeditor”的方式直接调用，如

<textarea id=”article_con”name=”article_content”class=“ckeditor”></textarea>

第二种是js实现页面载入时替换，由于我使用了jQuery，所以用jQuery的载入方式,否则用js的window.onload方法进行载入时替换,代码如下:

<script language=”javascript”>

$(function(){

CKEDITOR.replace（“article_con”）;

});

</script>

　　我建议使用第二种，好处我们待会说。

　　无论使用class还是js函数调用之后，重新载入你的页面就可以看到单调的textarea变成了好看的文本编辑区，十分方便（爱心提示：编辑器要点击新建按钮或者其他东西才能进入编辑，这是仿照如word这些编辑器的制作的,可能会对使用造成不便,所以先提醒），但是你可能发现有些按键不能使用或者功能不完善，比如插入图片功能，插入flash功能不全，这些对于图文混编十分重要；或者编辑区域与你想要的宽度、长度不相符，按键功能完善等会再说，我们先说说关于CK的一般配置。

　　还记得开始保留的config.js文件吗？这就是CK的配置文件，只需要添加属性如config.height:420等，一切配置都可以在这里实现，包括简单的长宽高设定，toolbar风格，复杂的按键分布等，但我并不推荐直接修改config文件，因为毕竟可能不止一次调用，比如我在页面1要长度是300，页面2长度是400,这样如果直接修改config文件的话就可能造成混乱（当然，默认设置还是可以写进去的，使用仿照里面已有的写法），那么我们如何解决呢？

　　之前说过我推荐使用js函数调用的方法载入CK，原因就在这里，因为js调用中可以进行属性设定，具体方法是类似于这样：

CKEDITOR.replace(“article.content”,{

Height:400, //编辑器高度

Toolbar:basic, //编辑器风格

})

　　注意到了吗？这跟我们jQuery的风格很相像，十分简单明白，下面我把config其他设定项也写出来给大家参考：

[css]

//字体.

font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;

Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;

//工具按钮.

toolbar=

[

['Source','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form','Checkbox','Radio','TextField','Textarea','Select','Button',

'ImageButton','HiddenField'],

‘/’,

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

'PageBreak'],

‘/’,

['Styles','Format','Font','FontSize'],

['TextColor','BGColor'],

['Maximize','ShowBlocks','-','About']

];

//宽度

width = 500;

//高度

height = 400;

//皮肤

skin=’v2′;

//背景色

uiColor = ‘#666666’；

//等等… …

[/css]

　　使用这些参数就可以自由控制CK了。现在我们看下使用Ck进行参数传递，因为CK的原理也是采用HTML+CSS的形式做到html页面中各种样式修改的，这些可以在点击源代码按键得知，而它的参数传递，就是直接将所有的东西包括标签包括样式，一股脑传递到表单中action属性指定的后台去，而后台（这里使用简单易懂的php进行说明，之后的代码也是php代码）就可以用比如

<?PHP echo $content=$_POST[“article_content”];?>进行接收，而且显示出来的就是用CK编辑的样式，这就是所见即所得。

　　当然，这些文本我是需要存储入数据库的，这样就需要进行一些处理，php当中有很好的库函数帮助我们进行这些信息的处理

<?PHP

//使用$content表示接收到的表单数据

get_magic_quotes_gpc()?$content=htmlspecialchars（$content）:$content=htmlspecialchars(addslashes($content))；

?>

这样我们放进数据库就可以避免一些常规的错误，从数据库中提取的时候则使用相对的

<?PHP

//使用$content表示从数据库中提取的数据

get_magic_quotes_gpc()?$content=$content:$content=stripslashes ($content))；

?>

　　这些代码我就不解释了，重要的只是让大家知道存储入数据库前最好进行下处理以规避异常，同时看看CK的数据传输。

　　说到这里，CK作为文本编辑器的功能已经全部实现了，但是这还是不够的，因为对于图文混编，很重要的图的功能没有实现，最明显的就是点开图片按钮之后，输入图片文件旁边没有实现浏览的按钮，这是很不合理的，说明功能上还没有完善，现在我们就开始做图片等方面的功能。

　　首先我们明确一点，图片要想显示，那么这张图片肯定有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=\'#\'" /../ckeditor/ckfinder/ckfinder.js"></script>

Src中是必须正确的源，这里只是我的参考。

　　真正单独使用CKF的话，我们只需要实例化CKfinder的类，然后进行basepath设定就好了，但因为Ck与CKF同根同源，这些步骤可以省略，直接我们进入CK配置，添加关于CKfinder的属性设定，比如filebrowserBrowseUrl，等，具体如下：

$(function(){

CKEDITOR.replace( 'editor1',

{

        filebrowserBrowseUrl : '/ckfinder/ckfinder.html',//查看CK源码得知浏览服务器按钮有个这种属性指点击后启用的URL，这里指载入CKfinder

        filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',//点击CK图片按钮时浏览服务器按钮浏览图片存储的文件夹

        filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash', //点击flash按钮时浏览服务器按钮浏览图片存储的文件夹

        filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', //指启用上传，并指定上传文件调用的php文件

        filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', //上传图品文件时调用的php文件

        filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'， //上传flsh时调用的php文件

    });

})

　　具体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的同理，还有其他的属性我就不赘述了，回头我翻译了发个中文的到网上大家看哈。

　　上诉所有动作完成后我们的在线编辑器就可以完全开始工作了，无论是图文混编还是加入表格等操作，样样手到擒来，性能也自不必多说，大家花点时间读完我的笔记，相信同样会爱上这款优秀的在线文本编辑器的，也相信它会成为我们web开发漫漫路上的一大利器。