将CKfinder 整合进 CKEditor3.0的方法

CKFinder是一款功能强大的基于AJAX的文件浏览器，专为ASP.NET设计。它可以让您在网页上轻松浏览、管理和上传文件。这款浏览器以树形结构（Tree）展示目录，能够直观、清晰地展示文件结构。CKFinder还能自动检测图片并生成缩略图，极大提升了文件管理效率。这款浏览器由Fckeditor公司研发，与FckEditor配合使用，效果更佳。

近期，CKEditor进行了全新改版，不再提供文件上传功能。对于需要使用文件上传功能的用户来说，整合CKFinder无疑是一个明智的选择。为了顺利整合CKFinder和CKEditor，我们需要修改CKEditor插件文件夹下的JS源码。

以image插件为例，我们可以按照以下方式修改代码：

在原代码的基础上，我们需要添加一个按钮用于打开ckfinder页面，并为其增加onClick函数。修改后的代码如下：

{ type: 'button', id: 'browse', align: 'center', label: m.lang.mon.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() {

var finder = new CKFinder();

finder.BasePath = '../ckfinder20090716/';

finder.SelectFunction = SetFileField;

finder.Popup();

}}

在方法体外增加一个新的函数SetFileField，用于获取CKFinder返回的图片地址，并更新路径文本框和预览图片。具体代码如下：

function SetFileField(fileUrl) {

var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");

for(var i=0; i

if(inputStr[i].type=="text") {

//获取第一个输入框控件（图像路径），设置新的图片路径

CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);

break;

}

}

//更新预览图片

CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));

}

通过这样的修改，我们可以顺利整合CKFinder和CKEditor，实现文件上传、管理和预览功能，为用户带来更加便捷的文件操作体验。如果您在使用过程中遇到任何问题，欢迎随时联系我们。