ckeditor粘贴图片在ie下自动上传的研究

ckeditor粘贴图片在ie下自动上传的研究

ID:8970475

大小:71.50 KB

页数:4页

时间:2018-04-13

ckeditor粘贴图片在ie下自动上传的研究_第1页
ckeditor粘贴图片在ie下自动上传的研究_第2页
ckeditor粘贴图片在ie下自动上传的研究_第3页
ckeditor粘贴图片在ie下自动上传的研究_第4页
资源描述:

《ckeditor粘贴图片在ie下自动上传的研究》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、CKeditor粘贴图片在IE下自动上传的研究April23rd,2011TranslateLeaveacommentGotocommentsFCKeditor升级到3.0版本,并改名为CKeditor(ContentAndKnowledge),是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。相信各位都有用过。在开发教育系统时候,很多需求需要用到富文本编辑器,我们首选也是CKeditor(国产的KindEditor也是一个不错的选择)。在探索教育系统时,教师是最需要考虑的用户之一,而教师往往会有

2、大量word文档,往往会直接复制word内容粘贴到富文本编辑器提交内容。用过CKeditor会知道,如果word带有图片,粘贴到富文本编辑器里面是看不到图片的。本文就是研究CKeditor粘贴图片在IE下自动上传的功能实现。一、粘贴图片内容为什么不到图片?打开CKeditor的官网演示页面(http://ckeditor.com/demo)。打开一个word文档,复制文档中有图片和文字部分。看下图:粘贴到CKeditor编辑器里面,却是显示不出图片,看下图:查看CKeditor里面的源码可以看到,图片的里面的资源链接都是本地

3、机器上的图片,没有权限读取本地的图片,提交后,此图片链接也是向本地的,不是互联网上的图片,这就是永远也看不到图片了:二、解决方案1.借助IE的ActiveX插件把本地图片转换长BASE64码2.编写CKeditor插件,取用ajax技术自动提交BASE64码到后台,后台获取BASE64码后转换成图片存储在服务器上,并返回数据到插件并把网络图片的URL替换原来的指向本地图片的地址。三、实现的技术细节ActiveX作用ActiveX的作用,就是提供一个方法,将图片转换成Base64编码,前端JavaScript会调用此方法;ActiveX

4、中核心方法是:publicstringImageToBase64(stringImagePath);编写CKeditor插件此插件会检测到粘贴动作,并判断粘贴的内容是否存放本地图片,如果存在就进行处理。JavaScript调用ActiveX插件的转换方法,把本地图片转换成BASE64码,并通过ajax提交到后台;后台返回真实的网络图片地址,插件会替换掉编辑器里面原本地图片的连接。看代码片断:/**CKEDITORpluginpasteuploadpic1.0released*SITE:http://jacken.com.cn*AUTH

5、OR:Jacken(陈文光)*MAIL:chenjacken@gmail.com*///处理粘贴内容varpasteService=function(evt){//所见即所得模式,其他模式就退出if(this.mode!='wysiwyg')return;vardata=evt.data['html'];//处理html内容if(!data)return;//检测本地文件地址的正则表达式varlocalImgReg=//ig;varimgArray=data.match(localImgReg);//是否有本地图片URLif(imgA

6、rray){//上传并处理编辑器内容replaceEditor(uoloadPic(imgArray));}};if(pasteuploadpic_url){//监听事件editor.on('paste',pasteService,null,null,1000);}/***配置处理图片上传的后台地址,如果不配置,此插件不会启用.**@nameCKEDITOR.config.pasteuploadpic_url*@typeString*@defaultnull*@since1.0*@exampleconfig.pasteuploadpi

7、c_url='/ckeditorAction_upload.action';*//***配置ActiveXObject名称**@nameCKEDITOR.config.pasteuploadpic_axo*@typeString*@default'Jacken.Word'*@since1.0*@exampleconfig.pasteuploadpic_axo='/Jacken.Word';*/后台如何处理BASE64需要编写后台程序来获取BASE64码并转换成图片,保存到服务器,获得图片的网络绝对地址,并替换原编辑器内容的图片src。

8、Java用sun.misc.BASE64Decoder().decodeBuffer(Stringstr)来奖Base64图片编码转换成字节。PHP用base64_decoder()。四、已完成的功能和不足之处在IE下借

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。