当前位置:首页 > 教程 > CKEditor 集成自定义上传文件的示例方法

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

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

CKEditor 集成、文件上传、在线编辑器

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

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设置文件的一个示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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上传的图片文件就可以了,最后访问器端,返回如下示例的代码就可以了

1
2
3
4
context.Response.ContentType = "text/html";
context.Response.Write("<script type=\"text/javascript\">");
context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + context.Request.QueryString["CKEditorFuncNum"] + ",'" + thumbnailUrl + "','')");
context.Response.Write("</script>");

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

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

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

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

  • << 浏览器报错找不到jquery-1.10.2.min.map...
  • 从美丽说蘑菇街引流的秘密 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/ckedit-file-upload-custom/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。