CKEditor 集成自定义上传文件的示例方法

在进行web开发的时候我们经常会使用到CKEditor后台编辑器，CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点，使你在编辑时所看到的内容和格式，能够与发布后看到的效果完全一致。利用它，我们可以在 Web 上实现类似于 Microsoft Word 的许多强大的功能。CKEditor 完全是基于 JavaScript 开发的，因此不必在客户端进行任何安装，并且兼容各大主流浏览器，比如：IE，Firefox，Chrome，Safari，Opera。而且由于它是一个纯粹的 JavaScript 应用，所以无论用的是哪种服务器端技术（JSP，PHP，ASP 等等），都可以获得很好的支持。

CKEditor 的前身是 FCKEditor，这个项目是在 2003 年由 Frederico Caldeira Knabben 发起的，FCK 代表的就是项目创建者 Frederico Caldeira Knabben 的简称。从 3.0 版本后，它改名为 CKEditor，CK 代表的含义是 Content And Knowledge（内容与知识）。现在，CKEditor 隶属于 CKSource 公司，背后拥有一个强大的技术团队的支持。在同类产品之中，CKEditor 的使用最为广泛，社区最为活跃，一直拥有良好的口碑。

目前，有很多公司都在使用 CKEditor 作为 Web 编辑的解决方案，比如：IBM，Oracle，Adobe 等等。其中，IBM 已经在其所发布的多款软件中广泛应用了 CKEditor，这些软件包括：Lotus Connections，Lotus Quickr，LotusLive，Lotus Notes，Rational Requirements Management 等等。不仅如此，IBM 也为 CKEditor 的发展，不遗余力地提供了持续性的投入与支持，在 IBM 内部的产品团队中，有专业的开发人员负责 CKEditor 的定制开发，还有专门的技术社区供大家讨论和交流。

最新版本的CKEditor的图片上传功能是默认没有开启的，这样我们如果要使用图片上传功能而又不想自己动手写图片上传的功能的时候，我们可以使用官方的FCKEditor插件（最新版本FCKEditor只是作为CKEditor的一个插件），这样也能实现图片文件上传。但是当我们想通过自己的方法上传图片文件功能与CKEditor集成的话，就需要理解CKEditor的传递方法了。

自定义图片文件上传与CKEditor的集成

在CKEditor下载的CKEditor的完整包，在根目录下有一个叫做config.js的文件，这个文件是CKEditor的设置文件，下面是CKEditor设置文件的一个示例：

CKEDITOR.editorConfig = function( config )
{
	//Define changes to default configuration here. For example:
	config.uiColor = '#AADC6E';
	config.language = 'zh-cn';
	config.toolbar = 'Custom';
	config.toolbar_Custom =
	[
		{ name: 'insert', items: ['Image'] },
	];
	config.editingBlock = false;
	config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;24/24px;32/32px;48/48px';
	config.filebrowserImageUploadUrl = '/fileupload/?type=Images&customerParameter=value';};
}

config.filebrowserImageUploadUrl就是配置上传图片的post的路径，这样你只要是说请求的url中接受CKEditor上传的图片文件就可以了，最后访问器端，返回如下示例的代码就可以了

context.Response.ContentType = "text/html";
context.Response.Write("");

注意上面的代码只是截取.NET代码的部分，其中thumbnailUrl 是你上传文件的最终访问路径，返回给CKEditor可以自动插入图片到CKEditor的编辑器中，这样就能实现图片上传了，其中图片的上传动作就是在你设置的url请求中去处理了，request请求中是会有"upload"名的图片流了的，比如在.NET中就可以这样获取到图片文件流了

   HttpPostedFile httpPostedFile = context.Request.Files["upload"];

context是.NET的HttpContext，如果使用其他语言开发，你换成对应的即可。

以上就是CKEditor 集成自定义上传文件的示例方法，希望可以帮助到需要的朋友。