CkEditor+CKFinder整合方法
由大名鼎鼎的FCKEditor发展而来的新一代编辑器CKEditor去除了原先自带的文件上传管理功能，取而代之的是独立的CKFinder，现在，要实现编辑器的文件上传管理功能就需要将两者整合。
我们先采用最简单整合方式学习。（网络上很多教程都是以将CKEditor与CKFinder放在网站根目录下为例的，跟着教程操作即可。这里主要是讨论把这两者放在非根目录下的情况，例如我的是放在dev/adminpanel/adminskin/js/plugins/目录中的。其中dev目录是网站根目录，而调用CKEditor的页面是放在adminpanel目录下的）
1，加载CKEditor与CKFinder的js文件
<!-- CKEditor编辑器 标准版 -->
<script src="adminskin/js/plugins/ckeditor/ckeditor.js"></script>
<!-- CKFinder文件管理器 CKEditor版 -->
<script src="adminskin/js/plugins/ckfinder/ckfinder.js"></script>
2,在页面需要调用编辑器的位置插入
<textarea class="ckeditor" id="editor1" name="editor1"></textarea>
这时最简单的通过特定的class来定位替换textarea为CKEditor实例。 只要把textarea的class定义为ckeditor，该textarea就会被自动替换。在这种方式下，编辑中的内容会作为textarea的内容被提交到表单中。
如果需要多个CKEditor，是不是把多个textarea的class都定义为ckeditor就行了呢？大家可以试试看。我还没试过。还有个问题就是，如果我一个页面要用到精简版的CKEditor与全功能版本的CKEditor，那该怎么搞？有待研究。
在CKEditor的根目录下有个 config.js 这里是一些参数配置，用来改变编辑器默认配置，例如：编辑器语言，宽，高等等。这个大家可以找度娘问问。
举例：
config.language = 'zh-cn';
config.height = 400;
到这里，编辑器应该已经可以使用了，只是CKFinder还没起作用。
下面是配置整合CKFinder，我们也采用最简单的方式。开头部分我们其实已经载入了CKFinder的js文件了。下面就是在页面中整合，官方给出的代码如下（添加在被整合的页面中即可，或者通过调用JS也行，我想）：
<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.检查CKEditor是否正确安装加载，没有就给出提示。
if ( typeof CKEDITOR == 'undefined' )
{
document.write(
'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.' +
'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
'this file, changing the wrong paths in the <head> (line 5) and the "BasePath"' +
'value (line 32).' ) ;
}
else
// CKEditor检查正常的话
{
var editor = CKEDITOR.replace( 'editor1' );
editor.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>"Browse Server"</b>.</p>' );
//上面第一行是定义editor为通过code的方法把textarea替换为编辑器，用这个方法需要删除刚才配置的textarea的class中的ckeditor类，因为会与其他js插件产生冲突，因为这个问题花了我一小时
//上面第二行是往编辑器中置入默认数据。
// Just call CKFinder.setupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
// 下面是通过调用CKFinder.setupCKEditor进行整合，第一个参数应该是进行textarea与编辑器的替换，第二个参数为CKFinder的路径，不设置即默认为/ckfinder/
CKFinder.setupCKEditor( editor, 'adminskin/js/plugins/ckfinder/' ) ;
//第二个参数也可以以一个带上参数的对象的方式传递，如下
// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v1' } ) ;
}
</script>
配置好之后，发现编辑的图片小按钮点开已经带上了上传管理按钮了。但是点击后发现如下提示
因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
这是由于出去安全考虑，CKFinder默认需要进行权限验证（比如判断用户是否合法登陆）后才能使用。我们测试的时候，可以修改一下取消验证。
如果挂上互联网，还需检测权限。
取消验证方法：PHP版本为例
找到CKFinder根目录下的Config.php,打开 找到 CheckAuthentication函数
把return false; 改为 return true; 即可。
至此，两者整合完毕，可测试使用。不仅上传图片可以使用，也可以在编辑超链接的时候上传文件，生成链接哦。
但是还有两个问题需要解决（其实解决的第一个问题就解决的第二个问题）：
1，上传文件自动重命名。
2，中文命名的文件，上传产生乱码文件名的解决。
解决方法
打开FileUpload.php文件：ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php
查找如下代码（在大约62、64行）
if ($sFileName != $sUnsafeFileName)
{$iErrorNumber = CKFINDER_CONNECTOR_ERROR_UPLOADED_INVALID_NAME_RENAMED;}
在下方添加如下代码：
$sExtension=CKFinder_Connector_Utils_FileSystem::getExtension($sFileName);
$sFileName=date("Ymd")."_".date("His").".".$sExtension;
=====================================================
下面邪恶的事情。去掉CKFinder的一些提示信息，你懂的！
以2.3.1版本为例 ，打开ckfinder/ckfinder.js
1，去掉左下角的提示文字，找到
var p="\x3c\x64\151\x76\040\143\x6c\141\x73\163\075\x27\166\151\x65\167\040\x74\x6f\157\154\x5f\160\x61\156\x65\x6c\x27\x20\163\164\x79\154\145\075\x27\x70\141\x64\x64\x69\156\x67\072\062\x70\170\073\x64\151\x73\x70\154\x61\x79\072\x62\154\157\143\x6b\040\x21\x69\x6d\x70\157\x72\x74\141\156\164\073\x70\157\x73\151\164\151\x6f\x6e\072\163\x74\x61\x74\151\143\x20\041\x69\155\160\x6f\162\164\x61\x6e\164\073\x63\157\x6c\x6f\x72\x3a\142\154\141\143\153\040\041\x69\155\x70\x6f\x72\164\x61\156\x74\073\142\141\x63\x6b\147\162\x6f\165\156\144\055\x63\x6f\x6c\157\x72\x3a\x77\x68\x69\x74\145\x20\x21\151\155\x70\157\x72\164\x61\156\x74\x3b\x27\076",q="\x3c\x2f\144\x69\x76\076",r=p+"\x54\150\x69\163\040\x69\x73\x20\x74\150\145\x20\x44\105\x4d\x4f\x20\166\145\162\x73\x69\x6f\x6e\x20\157\146\040\x43\x4b\x46\151\156\x64\145\x72\x2e\040\x50\x6c\x65\x61\x73\145\040\x76\x69\x73\x69\x74\x20\164\x68\x65\x20\074\141\040\150\162\145\x66\x3d\047\150\164\x74\160\x3a\057\x2f\x63\153\163\x6f\x75\x72\143\x65\056\143\x6f\x6d\057\x63\x6b\x66\151\156\x64\145\x72\047\040\x74\141\x72\147\145\164\x3d\x27\137\x62\x6c\x61\156\x6b\047\076\x43\x4b\x46\151\156\144\145\162\x20\x77\x65\142\x20\163\151\164\145\074\057\141\076\040\x74\157\x20\x6f\x62\164\x61\x69\x6e\040\x61\040\x76\x61\154\x69\144\x20\154\151\x63\145\x6e\163\x65\056"+q,s=p+"\x43\113\x46\151\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\x70\145\162\040\114\151\x63\145\156\x73\145\x3c\142\x72\x2f\x3e\x4c\151\x63\x65\x6e\163\x65\x64\040\164\157\x3a\040";
替换为
var p="\x20",q="\x20",r=p+"\x20"+q,s=p+"\x20";
2，去掉右侧文件列表上方的提示文字，找到
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj)}
替换为
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M){this.tools.of().hide();}else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}
3，找到以下代码，删除它，这样图片可移动到其他文件夹
if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(J)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))x.app.msgDialog('',"\124\150\151\x73\040\146\165\156\143\164\151\157\x6e\040\x69\x73\040\144\151\x73\141\142\154\x65\x64\040\151\x6e\x20\164\150\145\x20\144\x65\x6d\157\x20\x76\x65\162\163\x69\157\156\x20\x6f\146\x20\x43\x4b\x46\x69\x6e\x64\x65\x72\x2e\x3c\x62\162\040\x2f\076\x50\154\x65\x61\x73\x65\x20\166\151\x73\x69\x74\x20\x74\x68\145\040\074\x61\x20\150\162\x65\146\075\x27\150\x74\164\x70\072\x2f\x2f\x63\x6b\146\x69\x6e\144\x65\x72\056\x63\x6f\x6d\047\076\x43\x4b\106\151\x6e\x64\x65\x72\x20\x77\145\x62\x20\x73\x69\x74\145\x3c\x2f\x61\x3e\040\x74\157\x20\157\x62\164\x61\x69\156\040\x61\x20\x76\x61\154\x69\x64\040\x6c\151\x63\x65\156\163\x65\056");else
2
您可能也喜欢：
由大名鼎鼎的FCKEditor发展而来的新一代编辑器CKEditor去除了原先自带的文件上传管理功能，取而代之的是独立的CKFinder，现在，要实现编辑器的文件上传管理功能就需要将两者整合。
我们先采用最简单整合方式学习。（网络上很多教程都是以将CKEditor与CKFinder放在网站根目录下为例的，跟着教程操作即可。这里主要是讨论把这两者放在非根目录下的情况，例如我的是放在dev/adminpanel/adminskin/js/plugins/目录中的。其中dev目录是网站根目录，而调用CKEditor的页面是放在adminpanel目录下的）
1，加载CKEditor与CKFinder的js文件
<!-- CKEditor编辑器 标准版 -->
<script src="adminskin/js/plugins/ckeditor/ckeditor.js"></script>
<!-- CKFinder文件管理器 CKEditor版 -->
<script src="adminskin/js/plugins/ckfinder/ckfinder.js"></script>
2,在页面需要调用编辑器的位置插入
<textarea class="ckeditor" id="editor1" name="editor1"></textarea>
这时最简单的通过特定的class来定位替换textarea为CKEditor实例。 只要把textarea的class定义为ckeditor，该textarea就会被自动替换。在这种方式下，编辑中的内容会作为textarea的内容被提交到表单中。
如果需要多个CKEditor，是不是把多个textarea的class都定义为ckeditor就行了呢？大家可以试试看。我还没试过。还有个问题就是，如果我一个页面要用到精简版的CKEditor与全功能版本的CKEditor，那该怎么搞？有待研究。
在CKEditor的根目录下有个 config.js 这里是一些参数配置，用来改变编辑器默认配置，例如：编辑器语言，宽，高等等。这个大家可以找度娘问问。
举例：
config.language = 'zh-cn';
config.height = 400;
到这里，编辑器应该已经可以使用了，只是CKFinder还没起作用。
下面是配置整合CKFinder，我们也采用最简单的方式。开头部分我们其实已经载入了CKFinder的js文件了。下面就是在页面中整合，官方给出的代码如下（添加在被整合的页面中即可，或者通过调用JS也行，我想）：
<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.检查CKEditor是否正确安装加载，没有就给出提示。
if ( typeof CKEDITOR == 'undefined' )
{
document.write(
'<strong><span style="color: #ff0000">Error</span>: CKEditor not found</strong>.' +
'This sample assumes that CKEditor (not included with CKFinder) is installed in' +
'the "/ckeditor/" path. If you have it installed in a different place, just edit' +
'this file, changing the wrong paths in the <head> (line 5) and the "BasePath"' +
'value (line 32).' ) ;
}
else
// CKEditor检查正常的话
{
var editor = CKEDITOR.replace( 'editor1' );
editor.setData( '<p>Just click the <b>Image</b> or <b>Link</b> button, and then <b>"Browse Server"</b>.</p>' );
//上面第一行是定义editor为通过code的方法把textarea替换为编辑器，用这个方法需要删除刚才配置的textarea的class中的ckeditor类，因为会与其他js插件产生冲突，因为这个问题花了我一小时
//上面第二行是往编辑器中置入默认数据。
// Just call CKFinder.setupCKEditor and pass the CKEditor instance as the first argument.
// The second parameter (optional), is the path for the CKFinder installation (default = "/ckfinder/").
// 下面是通过调用CKFinder.setupCKEditor进行整合，第一个参数应该是进行textarea与编辑器的替换，第二个参数为CKFinder的路径，不设置即默认为/ckfinder/
CKFinder.setupCKEditor( editor, 'adminskin/js/plugins/ckfinder/' ) ;
//第二个参数也可以以一个带上参数的对象的方式传递，如下
// It is also possible to pass an object with selected CKFinder properties as a second argument.
// CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v1' } ) ;
}
</script>
配置好之后，发现编辑的图片小按钮点开已经带上了上传管理按钮了。但是点击后发现如下提示
因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
这是由于出去安全考虑，CKFinder默认需要进行权限验证（比如判断用户是否合法登陆）后才能使用。我们测试的时候，可以修改一下取消验证。
如果挂上互联网，还需检测权限。
取消验证方法：PHP版本为例
找到CKFinder根目录下的Config.php,打开 找到 CheckAuthentication函数
把return false; 改为 return true; 即可。
至此，两者整合完毕，可测试使用。不仅上传图片可以使用，也可以在编辑超链接的时候上传文件，生成链接哦。
但是还有两个问题需要解决（其实解决的第一个问题就解决的第二个问题）：
1，上传文件自动重命名。
2，中文命名的文件，上传产生乱码文件名的解决。
解决方法
打开FileUpload.php文件：ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php
查找如下代码（在大约62、64行）
if ($sFileName != $sUnsafeFileName)
{$iErrorNumber = CKFINDER_CONNECTOR_ERROR_UPLOADED_INVALID_NAME_RENAMED;}
在下方添加如下代码：
$sExtension=CKFinder_Connector_Utils_FileSystem::getExtension($sFileName);
$sFileName=date("Ymd")."_".date("His").".".$sExtension;
=====================================================
下面邪恶的事情。去掉CKFinder的一些提示信息，你懂的！
以2.3.1版本为例 ，打开ckfinder/ckfinder.js
1，去掉左下角的提示文字，找到
var p="\x3c\x64\151\x76\040\143\x6c\141\x73\163\075\x27\166\151\x65\167\040\x74\x6f\157\154\x5f\160\x61\156\x65\x6c\x27\x20\163\164\x79\154\145\075\x27\x70\141\x64\x64\x69\156\x67\072\062\x70\170\073\x64\151\x73\x70\154\x61\x79\072\x62\154\157\143\x6b\040\x21\x69\x6d\x70\157\x72\x74\141\156\164\073\x70\157\x73\151\164\151\x6f\x6e\072\163\x74\x61\x74\151\143\x20\041\x69\155\160\x6f\162\164\x61\x6e\164\073\x63\157\x6c\x6f\x72\x3a\142\154\141\143\153\040\041\x69\155\x70\x6f\x72\164\x61\156\x74\073\142\141\x63\x6b\147\162\x6f\165\156\144\055\x63\x6f\x6c\157\x72\x3a\x77\x68\x69\x74\145\x20\x21\151\155\x70\157\x72\164\x61\156\x74\x3b\x27\076",q="\x3c\x2f\144\x69\x76\076",r=p+"\x54\150\x69\163\040\x69\x73\x20\x74\150\145\x20\x44\105\x4d\x4f\x20\166\145\162\x73\x69\x6f\x6e\x20\157\146\040\x43\x4b\x46\151\156\x64\145\x72\x2e\040\x50\x6c\x65\x61\x73\145\040\x76\x69\x73\x69\x74\x20\164\x68\x65\x20\074\141\040\150\162\145\x66\x3d\047\150\164\x74\160\x3a\057\x2f\x63\153\163\x6f\x75\x72\143\x65\056\143\x6f\x6d\057\x63\x6b\x66\151\156\x64\145\x72\047\040\x74\141\x72\147\145\164\x3d\x27\137\x62\x6c\x61\156\x6b\047\076\x43\x4b\x46\151\156\144\145\162\x20\x77\x65\142\x20\163\151\164\145\074\057\141\076\040\x74\157\x20\x6f\x62\164\x61\x69\x6e\040\x61\040\x76\x61\154\x69\144\x20\154\151\x63\145\x6e\163\x65\056"+q,s=p+"\x43\113\x46\151\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\x70\145\162\040\114\151\x63\145\156\x73\145\x3c\142\x72\x2f\x3e\x4c\151\x63\x65\x6e\163\x65\x64\040\164\157\x3a\040";
替换为
var p="\x20",q="\x20",r=p+"\x20"+q,s=p+"\x20";
2，去掉右侧文件列表上方的提示文字，找到
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj)}
替换为
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M){this.tools.of().hide();}else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}
3，找到以下代码，删除它，这样图片可移动到其他文件夹
if(a.bF&&1==a.bs.indexOf(a.bF.substr(1,1))%5&&a.lS(J)!=a.lS(a.ed)||a.bF&&a.bF.substr(3,1)!=a.bs.substr((a.bs.indexOf(a.bF.substr(0,1))+a.bs.indexOf(a.bF.substr(2,1)))*9%(a.bs.length-1),1))x.app.msgDialog('',"\124\150\151\x73\040\146\165\156\143\164\151\157\x6e\040\x69\x73\040\144\151\x73\141\142\154\x65\x64\040\151\x6e\x20\164\150\145\x20\144\x65\x6d\157\x20\x76\x65\162\163\x69\157\156\x20\x6f\146\x20\x43\x4b\x46\x69\x6e\x64\x65\x72\x2e\x3c\x62\162\040\x2f\076\x50\154\x65\x61\x73\x65\x20\166\151\x73\x69\x74\x20\x74\x68\145\040\074\x61\x20\150\162\x65\146\075\x27\150\x74\164\x70\072\x2f\x2f\x63\x6b\146\x69\x6e\144\x65\x72\056\x63\x6f\x6d\047\076\x43\x4b\106\151\x6e\x64\x65\x72\x20\x77\145\x62\x20\x73\x69\x74\145\x3c\x2f\x61\x3e\040\x74\157\x20\157\x62\164\x61\x69\156\040\x61\x20\x76\x61\154\x69\x64\040\x6c\151\x63\x65\156\163\x65\056");else
2
您可能也喜欢：
1166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
