目录
php开发–使用 CKEditor 和 CKFinder 实现上传功能
1. 下载安装 CKEditor:
2. 下载安装 CKFinder:
3. 在网页中使用 CKEditor 和 CKFinder:
4. 配置CKFinder进行上传图片，Flash等。
5．Ckfinder实现普通文件上传
ckfinder中实现文件上传后按当前时间改名
CKEditor 优化配置
精简Ckeditor
提速：禁用拼写检查
CKFinder 单独使用
ckfinder去掉注册的提示信息
php开发–使用 CKEditor 和 CKFinder 实现上传功能
1. 下载安装 CKEditor:
http://ckeditor.com/
解压下载到的CKEditor放到网站的路径中即可
简单配置ckeditor，打开config.js，添加如下内容
CKEDITOR.editorConfig = function( config )
{
config.language = ‘zh-cn’;
config.uiColor = ‘#FFA’;
config.skin = ‘v2′;
config.width = 850;
config.height = 400;
config.toolbar = ‘Full’;
};
2. 下载安装 CKFinder:
http://ckfinder.com/download
解压下载到的CKEditor放到与CKEditor同一目录中即可
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签，所以把textarea放到一个form中，当提交到php服务器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意，因为 CKEditor 要替换 textarea，所以相应的javascript 代码”CKEDITOR.replace(xxxxxx)” 要放在 textarea 的后面。
最简单的方法，直接使用下面的例子修改一下即可。可以在网页中看到 CKEditor 了，兴奋吧。
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=UTF-8″>
<title>CKEditor</title>
</head>
<body>
<form action=”b.php” method=”post”>
<textarea name=”editor1″>CKEditor Demo</textarea>
<input type=”submit” name=”submit” value=”Submit” />
</form>
</body>
<script src=”ckeditor/ckeditor.js”></script>
<script type=”text/javascript”>
// 启用 CKEitor 的上传功能，使用了 CKFinder 插件
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’
});
</script>
</html>
注意：路径一定要正确，否者无法显示。
4. 配置CKFinder进行上传图片，Flash等。
到这里，点击 “Image” 按钮，在弹出的窗口中的 “Upload” 标签中已经看到上传按钮了，但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录，如uploads，
其路径为/Users/Biao/Sites/php/uploads/
[For Linux: 把其权限设置为php server可读写，最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]
b.找到配置文件第32行，把 function CheckAuthentication() { return false; }
修改成 function CheckAuthentication() { return true; }//新版为第33行
c. 找到第63行，把 $baseUrl 的值改成保存上传文件存目录的URL，
如 $baseUrl = ‘/~Biao/php/uploads/’;
怎么取得这个 URL 呢？其实很简单，在这个uploads文件夹里创建一个简单的path.php文件：
<?php echo $_SERVER["PHP_SELF"] ?>，然后从浏览器里访问，
就可以得到 /~Biao/php/uploads/path.php，
则 uploads 文件夹的URL是 /~Biao/php/uploads/
d. 找到第82行，删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径，
如$baseDir =’/Users/Biao/Sites/php/uploads/’;
这是因为resolveUrl($baseUrl)函数不能正常工作。
可以这样也可以不修改，新版本的已经可以正常工作了。
至此，可以使用 CKEditor 和 CKFinder 上传文件了。
对上面这个小例子中服务器端的b.php代码：
<?php
header(“Content-Type:text/html; charset=utf-8″);
$str = $_POST['editor1'];
echo $str;
?>
可以看到，在点击submit按钮后，服务器端收到了CKEditor中的内容，并使用echo输出，生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。
ckeditor界面
Ckfinder界面
5．Ckfinder实现普通文件上传
其实上面的代码已经能够实现上传了只是找不到位置，应该这样操作即可成功。
点“插入/编辑超链接”，再点“上传”选项卡，选文件后点“上传到服务器上”
就可以实现了，呵呵。是不非常简单呀。
ckfinder中实现文件上传后按当前时间改名
还有一个问题就是用ckfinder上传的文件不会重命名，对于中文文件就不能识别了。
所有还要对上传的文件重命名，将文件名改为当前时间戳。
上传的有中文文件名的文件时会出现乱码并且编辑器无法显示上传文件。
CKfinder直接将文件以原文件名保存到服务器的，不知道官方有没提供更改保存文件名的配置方法（我没找到），所以直接更改PHP文件。
打开：ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php
//找到下面这几行，大约在59-61行左右：
if ($sFileName != $sUnsafeFileName) {
$iErrorNumber = CKFINDER_CONNECTOR_ERROR_UPLOADED_INVALID_NAME_RENAMED;
}
//添加以下两行解决中文乱码问题(重命名)
$sExtension=CKFinder_Connector_Utils_FileSystem::getExtension($sFileName);
$sFileName=date(“Ymd”).”_”.date(“His”).”.”.$sExtension;
CKEditor 优化配置
精简Ckeditor
在部署到Web服务器上时，下列文件夹和文件都可以删除：
/_samples ：示例文件夹；
/_source ：未压缩源程序；
/lang文件夹下除 zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）；
根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；
/skins 目录下不需要的皮肤，一般用V2(简单，朴素) ，如果只保留V2则必须在config.js中指定皮肤。
提速：禁用拼写检查
ckeditor 的自动拼写检查功能(通过与svn.spellchecker.net网站交互完成)，使得 ckeditor 的装载非常的慢，有时显得录入反应相当的慢。拼写检查对于中文是多余了，所以可以把此功能屏蔽掉。官方网站的说法是 Scayt’ (spell checker as yout type)
修改 ckeditor_3.3.1\config.js ( 以此版本为例 )
Js代码
CKEDITOR.editorConfig = function( config )
{
……
config.disableNativeSpellChecker = false ;
config.scayt_autoStartup = false;
……
};
下面是官网对这两个参数的说明( docs.cksource.com )：
参数 disableNativeSpellChecker 的说明：
Disables the built-in spell checker while typing natively available in the browser (currently Firefox and Safari only).
Even if word suggestions will not appear in the CKEditor context menu, this feature is useful to help quickly identifying misspelled words.
This setting is currently compatible with Firefox only due to limitations in other browsers.
参数 scayt_autoStartup 的说明：
If enabled (true), turns on SCAYT automatically after loading the editor.
CKEditor 增加字体：
修改ckeditor\config.js
Java代码
CKEDITOR.editorConfig = function( config )
{
config.font_names = ‘宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;’+ config.font_names ;
};其中，楷体/楷体_GB2312，表示在ckeditor中的字体显示名称为“楷体”，系统字体名称为“楷体_GB2312”。
CKEditor 添加自定义字体：
修改ckeditor\config.js
Config.js代码
config.contentsCss = ‘fonts.css’;
// 添加新的字体到 CKEditor 的字体列表
config.font_names = ‘fontnametodisplay/yourfontname;’ + config.font_names;
在 fonts.css 中添加@font-face 属性:
Fonts.css代码
@font-face {
“yourfontname”;
src: url( ../fonts/font.eot ); /* IE */
src: local(“realfontname”), url(“../fonts/font.TTF”) format(“truetype”); /*non-IE*/
}
ckfinder改进：多用户，自动按年月划分文件夹
默认的ckfinder只是单用户，或者说，多个用户共用同一个图片目录。所有上传的image全部拥挤在一个文件夹。
现在想实现：
1. 不同用户有自己的独立的文件夹。
2. 同一个用户的文件能自动根据上传时间归类。
（我这里ckfinder是与ckeditor结合使用的。如果是ckfinder单独使用或者是与其它editor结合的情况，可能会作不同的修改。）
找到 /ckfinder/config.php 中的 $baseUrl。这个变量是ckfinder管理的最顶级目录。假设$baseUrl = ‘/userfiles/’，那么默认的目录结构是：
/userfiles/
flashes/
images/
如果想改成这个结构：
/userfiles/
user1
flashes/
images/
user2
flashes/
images/
只要为每个用户设定好各自的顶级目录就可以了： $baseUrl = ‘/userfiles/’ . $user;
注意，如果 $user 的值是从$_SESSION中取得，需要在/ckfinder/config.php首行加上session_start();
到目前为止，第一个需求实现了。
第二个需求，只要两个步骤：
ONE找到 /ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php文件。文件上传的主要逻辑都在这里了。如果你用的是php4，聪明的你会知道去哪里找这个文件的。
在这个文件里找到 $sServerDir = $this->_currentFolder->getServerPath();
将其改成：
$sServerDir = $this->_currentFolder->getServerPath();
if ($_GET['command'] == ‘QuickUpload’){
$sServerDir .= ‘/’. date(‘Y/m’); // 加上以年和月两层目录
}
if (!file_exists($sServerDir)){ // 目录若未出现则创建它
CKFinder_Connector_Utils_FileSystem::createDirectoryRecursively($sServerDir);
}
TWO 找到 /ckfinder/core/connector/php/php5/CommandHandler/QuickUpload.php
找到其中的
$oRegistry->set(“FileUpload_url”, $this->_currentFolder->getUrl());
将其改为：
$oRegistry->set(“FileUpload_url”, $this->_currentFolder->getUrl().date(‘Y/m/’));
大功告成。
BTW，
无论怎样的文件保存规则和文件命名规则，都是$baseUrl ，$sServerDir ，和$sFileName这三个变量的配合。
如果是QuickUpload，即是从ckeditor的控件去upload files，还需留意两个要注册的变量：
$oRegistry->set(“FileUpload_url”, $value); 和
$oRegistry->set(“FileUpload_fileName”, $value);
FileUpload_url，FileUpload_fileName这两个变量是将刚上传的文件的URL返回到前端的ckeditor。
.
CKFinder 单独使用
将如下js代码加入到html文件中
<script type=”text/javascript” src=”../ckfinder/ckfinder.js”></script>
<script type=”text/javascript”>
function BrowseServer(inputId)
{
var finder =
new CKFinder() ;
finder.basePath =
‘../ckfinder/’; //导入CKFinder的路径
finder.selectActionFunction = SetFileField; //设置文件被选中时的函数
finder.selectActionData = inputId; //接收地址的input ID
finder.popup() ;
}
//文件选中时执行
function SetFileField(fileUrl,data)
{
document.getElementById(data["selectActionData"]).value = fileUrl ;
}
</script>
对应input的代码。
<input name=”data[pictureUrl]” type=”text” id=”picname” style=”width:240px” />
<input type=”button” name=”Submit2″ value=”站内选择或上传” style=”margin-left:8px;” />
ckfinder去掉注册的提示信息
网上找了好久都是旧版本的破解方法，只有自己动手找了。
找到ckfinder\skins\v1\app.css
#files_view.files_message .message_content{display:block;}
改为
#files_view.files_message .message_content{display:none;}
另外还有左下角也有对应的提示，找了半天也没找到到底在哪个地方，高手请自行解决。