豆子博客: php 整合ckeditor和ckfinder

ckeditor是一个功能很强大的web编辑器，而且是免费开源的，但是ckeditor不能把本地图片，flash等文件插入到编写的文章。这就需要ckfinder来协助了。

以下是整合ckeditor和ckfinder实现在ckeditor中插入本地图片和flash文件的步骤：

一，肯定是到ckeditor官网下载最新的 ckeditor 和 ckfinder啦！
ckeditor下载地址：http://ckeditor.com/download
ckfinder下载地址：http://ckfinder.com/download

二，把ckeditor和ckfinder解压的文件夹放在同一个目录下，如下图：

三，修改ckeditor目录下的 config.js文件。

修改文件如下：

CKEDITOR.editorConfig = function( config )
{
config.defaultLanguage = 'zh-cn';//中文化

config.language = true；
   config.font_defaultLabel = 'Arial'; //默认字体
   config.skin = 'default';                 //默认皮肤
           config.toolbar = ‘Full';              //工具栏展现（这里展现全部）

};

四，在Ckfinder下目录下修改config.php。
   修改文件上传目录：
   $baseUrl = '/uploadfiles/'; //uploadfiles文件夹跟ckeditor，ckfinder文件夹在同一目录下。
   修改function CheckAuthentication()的返回值为true，如下图：

五，编写测试文件ckeditor.php,文件所在目录跟ckeditor文件夹同一目录：代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CKEditor testing</title>
<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./ckfinder/ckfinder.js"></script>

</head>

<body>
<div width="800px">
<form method="post">
<textarea name="editor1"></textarea>
<input type="submit" value="提交"></input>
</form>
</div>
<script type="text/javascript">
var editor = CKEDITOR.replace('editor1',
{
    filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
    filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
    filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
    filebrowserWindowWidth : '800',
    filebrowserWindowHeight : '500',
});
CKFinder.SetupCKEditor(editor);
</script>

</body>

<?php

echo $_POST['editor1'] ;

?>
</html>

六，预览如下图：