CKeditor粘贴图片在IE下自动上传研究.docVIP

CKeditor粘贴图片在IE下自动上传的研究 April 23rd, 2011TranslateLeave a commentGo to comments FCKeditor升级到3.0版本，并改名为CKeditor(Content And Knowledge)，是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。相信各位都有用过。 在开发教育系统时候，很多需求需要用到富文本编辑器，我们首选也是CKeditor（国产的KindEditor也是一个不错的选择）。在探索教育系统时，教师是最需要考虑的用户之一，而教师往往会有大量word文档，往往会直接复制word内容粘贴到富文本编辑器提交内容。用过CKeditor会知道，如果word带有图片，粘贴到富文本编辑器里面是看不到图片的。 本文就是研究CKeditor粘贴图片在IE下自动上传的功能实现。 一、粘贴图片内容为什么不到图片？ 打开CKeditor的官网演示页面（/demo）。打开一个word文档，复制文档中有图片和文字部分。看下图： 粘贴到CKeditor编辑器里面，却是显示不出图片，看下图： 查看CKeditor里面的源码可以看到，图片的img里面的资源链接都是本地机器上的图片，没有权限读取本地的图片，提交后，此图片链接也是向本地的，不是互联网上的图片，这就是永远也看不到图片了： 二、解决方案 1.借助IE的ActiveX插件把本地图片转换长BASE64码 2.编写CKeditor插件，取用ajax技术自动提交BASE64码到后台，后台获取BASE64码后转换成图片存储在服务器上，并返回数据到插件并把网络图片的URL替换原来的指向本地图片的地址。 三、实现的技术细节 ActiveX作用 ActiveX的作用，就是提供一个方法，将图片转换成Base64编码，前端JavaScript会调用此方法；ActiveX中核心方法是： public string ImageToBase64(string ImagePath); 编写CKeditor插件 此插件会检测到粘贴动作，并判断粘贴的内容是否存放本地图片，如果存在就进行处理。JavaScript调用ActiveX插件的转换方法，把本地图片转换成BASE64码，并通过ajax提交到后台；后台返回真实的网络图片地址，插件会替换掉编辑器里面原本地图片的连接。看代码片断： /* * CKEDITOR plugin pasteuploadpic 1.0 released * SITE: * AUTHOR: Jacken(陈文光) * MAIL: chenjacken@ */ // 处理粘贴内容 var pasteService = function(evt) { // 所见即所得模式,其他模式就退出 if (this.mode != wysiwyg) return; var data = evt.data[html]; // 处理html内容 if (!data) return; // 检测本地文件地址的正则表达式 var localImgReg = //ig; var imgArray = data.match(localImgReg); // 是否有本地图片URL if (imgArray) { // 上传并处理编辑器内容 replaceEditor(uoloadPic(imgArray)); } }; if (pasteuploadpic_url) { // 监听事件 editor.on(paste, pasteService, null, null,1000); } /** * 配置处理图片上传的后台地址,如果不配置,此插件不会启用. * * @name CKEDITOR.config.pasteuploadpic_url * @type String * @default null * @since 1.0 * @example config.pasteuploadpic_url=/ckeditorAction_upload.action; */ /** * 配置ActiveXObject名称 * * @name CKEDITOR.config.pasteuploadpic_axo * @type String * @default Jacken.Word * @since 1.0 * @example config.pasteuploadpi