BROPHP整合FCKEDITOR教程

最近在做一个项目,其中需要用到FCK编辑器,当然现在这个产品已经不叫这个名了,去掉了F,叫CKEditor,其实整合CK编辑器不难,难的是带上传图片和视频及附件上传,因为在默认的CK编辑器就不带上传功能,虽说它的拓展性很好,可我们并没有太多时间去研究怎么写一个上传插件.  不要失望,它们还有一款产品CKfinder,就是专门的一款附件管理产品,可以完美整合CKEditor,从而实现图片上传,视频上传,更强大的还带附件管理器,像本地管理文件一样方便.下面我就来分享整个整合过程,此方法适用于所有的PHP嵌入文本编辑器的需要.

第一步:  下载CKEditor和CKfinder
当然,如果你仅仅只需要编辑文本,不需要上传就可以忽略下面所有和CKfinder相关的代码.
CKEditor下载: ckeditor_3.6.2.zip
CKfinder下载: ckfinder_php_2.1.1.zip
为了保证不出错,请尽量从上面的链接下载或者去官网下载同版本的文件,因为不同版本的配置方法略有不同.

第二步:  解压文件
解压 ckeditor_3.6.2.zip后,将ckeditor目录复制到你项目的public目录下(用Brophp开发的项目根目录的public),同样把 ckfinder_php_2.1.1.zip解压后ckfinder的目录复制到你项目的public目录.
保证它们在同一层.如图:


第三步:复制类文件
将  ckeditor/ckeditor_php5.php复制到项目根目录的classes目录下改名为ckeditor.class.php,同样把  ckfinder/core/ckfinder_php5.php复制到项目根目录的classes目录下改名为ckfinder.class.php


第四步:  配置CKfinder(无需上传功能则跳过)
1,权限配置
打开ckfinder/config.php,  首先设置第一个函数CheckAuthentication()，这个函数需要按照自己的规则写，只要  return  true的情况才能允许上传文件到服务器的，不建议直接写return  true，这将导致安全问题。可以采用session来处理比较方便,当然你如果你允许访问编辑器所在页面的所有用户都有上传权限的话也可以直接在函数体内return  true。

session_start();function  CheckAuthentication(){if(isset($_SESSION['UseEidtor']))return  true;elsereturn  false;}

上面函数体默认的内容如下:

2,上传路径配置
也在ckfinder/config.php,  找到$baseUrl，这里就是上传文件的路径,这里如果你站点上传的东西都在一个位置,则直接这样  $baseUrl='/uploads/';注意这里的路径填写相对于项目站点根目录,不是项目根目录,比如你在本地开发的时候站点根目录 为localhost  可是你www下面有很多项目,那么这里的路径此时是相对于www目录.

$baseUrl  =  '/uploads/';  //这样配置则上传文件会上传到www/uploads下

默认为:

$baseUrl =  '/ckfinder/userfiles/';

3,上传的文件名
对于上传文件名，ckfinder会按照原有的名字命名，中文的情况下可能会乱码，所以建议使用日期重命名。打开/ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php  找到

$sUnsafeFileName  =CKFinder_Connector_Utils_FileSystem::convertToFilesystemEncoding(CKFinder_Connector_Utils_Misc::mbBasename($uploadedFile['name']));

后面加上下面两句:

$sExtension =  CKFinder_Connector_Utils_FileSystem::getExtension($sUnsafeFileName);$sUnsafeFileName=date('YmdHis').'.'.$sExtension;

第五步:  使用CKEditor
此方法用于分类编辑器代码,只完成 assign  功能,所以在你需要的方法里面调用此方法即可,例如有一个添加新闻类news中有一个添加新闻方法addNews,调用的时候在add里面调用下面方法即可.

1. /**
2. * CKEditor编辑器
3. * @param string $name  编辑器名
4. * @param string $value 初始化内容
5. * @param string $width 编辑器宽度
6. * @param string $height 编辑器高度
7. */
8. public function editor($name,$value='',$width='100%',$height='300px') {
9. //实例化CKeditor方法,传入参数为编辑器所在位置public/ckeditor
10. $ckeditor = new CKEditor($GLOBALS ['public'] .  'ckeditor/');    //这里调用BroPHP全局变量$GLOBALS['public']
13. // 设置编辑器的宽度
14. $ckeditor->Width = $width;
15. //设置模式为输出,否则下面的editor方法没有返回值,而是直接输出,无法显示在我们想要显示编辑器的位置
16. $ckeditor->returnOutput=true;
17. // 设置它的高度
18. $ckeditor->Height = $height;
21. //CKfinder与CKEditor整合,参数1为上面实例化的CKEditor对象,参数2为CKfinder的位置public.ckfinder
22. CKFinder::SetupCKEditor($ckeditor, $GLOBALS['public'].'ckfinder/') ;  //无需上传功能则跳过
25. //创建编辑器并返回代码,用于分配到页面
26. $CK = $ckeditor->editor($name,$value);
29. //分配编辑器到页面,但未显示
30. $this->assign ( "CK", $CK );
31. }

最后附上一个BroPHP的完整使用示例:
这里我把编辑器方法写在项目controls/common.class.php里,方便随调随用:

1. <?php
2. class Common extends Action {
3. public function init(){
4. }
7. /**
8. * CKEditor编辑器
9. * @param string $name  编辑器名
10. * @param string $value 初始化内容
11. * @param string $width 编辑器宽度
12. * @param string $height 编辑器高度
13. */
14. public function editor($name,$value='',$width='100%',$height='300px') {
15. //实例化CKeditor方法,传入参数为编辑器所在位置public/ckeditor
16. $ckeditor = new CKEditor($GLOBALS ['public'] .  'ckeditor/');    //这里调用BroPHP全局变量$GLOBALS['public']
19. // 设置编辑器的宽度
20. $ckeditor->Width = $width;
21. //设置模式为输出,否则下面的editor方法没有返回值,而是直接输出,无法显示在我们想要显示编辑器的位置
22. $ckeditor->returnOutput=true;
23. // 设置它的高度
24. $ckeditor->Height = $height;
25. //CKfinder与CKEditor整合,参数1为上面实例化的CKEditor对象,参数2为CKfinder的位置public.ckfinder
26. CKFinder::SetupCKEditor($ckeditor, $GLOBALS['public'].'ckfinder/') ;  //无需上传功能则跳过
27. //创建编辑器并返回代码,用于分配到页面
28. $CK = $ckeditor->editor($name,$value);
29. //分配编辑器到页面,但未显示$this->assign ( "CK", $CK );
30. }

调用,这里假设有一个新闻类controls/news.class.php:

1. <?php
2. class news (){
3. public funtion index(){
4. $this->display();
5. }
6. public function add(){
7. $this->editor('content','','400px','300px');  //创建一个名字为content,初始内容为空的,宽400px,高300px的编辑器
8. $this->display();}
9. }
10. ?>
    添加新闻模板页代码:
        

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>添加新闻</title>
6. </head>
7. <body>
8. <form action="<{$app}>/news/insert" method="post">
9. <p>标题:<input type="text" name="title" ></p>
10. <p>内容:</p>
11. <p><{$CK}></p>
12. </form>
13. </body>
14. </html>

下面这几张图是我项目中的应用:

上传图片:

CKfinder文件管理器:


好了,这里主要是讲了如何在BroPHP里配置FCKeditor各FCKfinder,