IT教程 | 加入收藏 | 简体 | 繁体
编辑器:Dreamweave...PhotoShopGit&FTP编辑器
当前位置: 首页 > 工具教程 > 编辑器

CKeditor编辑器直接word直接上传word里的图片

2016-01-11来源:[www.121ask.com]热度:0℃ 【字体:

CKeditor编辑器直接word直接上传word里的图片:

CKeditor(Content And Knowledge),是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。相信各位都有用过。
在开发教育系统时候,很多需求需要用到富文本编辑器,我们首选也是CKeditor(国产的KindEditor也是一个不错的选择)。在探索教育系统时,教师是最需要考虑的用户之一,而教师往往会有大量word文档,往往会直接复制word内容粘贴到富文本编辑器提交内容。用过CKeditor会知道,如果word带有图片,粘贴到富文本编辑器里面是看不到图片的。
本文就是研究CKeditor粘贴图片在IE下自动上传的功能实现。
一、粘贴图片内容为什么不到图片?
打开CKeditor的官网演示页面(http://ckeditor.com/demo)。打开一个word文档,复制文档中有图片和文字部分。看下图:

粘贴到CKeditor编辑器里面,却是显示不出图片,看下图:

查看CKeditor里面的源码可以看到,图片的<img>里面的资源链接都是本地机器上的图片,没有权限读取本地的图片,提交后,此图片链接也是向本地的,不是互联网上的图片,这就是永远也看不到图片了:

二、解决方案
1.借助IE的ActiveX插件把本地图片转换长BASE64码
2.编写CKeditor插件,取用ajax技术自动提交BASE64码到后台,后台获取BASE64码后转换成图片存储在服务器上,并返回数据到插件并把网络图片的URL替换原来的指向本地图片的地址。
三、实现的技术细节
ActiveX作用
ActiveX的作用,就是提供一个方法,将图片转换成Base64编码,前端JavaScript会调用此方法;ActiveX中核心方法是:
[java] view plaincopyprint?
1.        <SPAN style="COLOR: #000000; FONT-WEIGHT: bold">public</SPAN> string ImageToBase64<SPAN style="COLOR: #009900">(</SPAN>string ImagePath<SPAN style="COLOR: #009900">)</SPAN><SPAN style="COLOR: #339933">;</SPAN>  
编写CKeditor插件
此插件会检测到粘贴动作,并判断粘贴的内容是否存放本地图片,如果存在就进行处理。JavaScript调用ActiveX插件的转换方法,把本地图片转换成BASE64码,并通过ajax提交到后台;后台返回真实的网络图片地址,插件会替换掉编辑器里面原本地图片的连接。看代码片断:
[javascript] view plaincopyprint?
1.        <SPAN style="FONT-STYLE: italic; COLOR: #006600"></SPAN><TEXTAREA class=javascript readOnly name=code>/*
2.         * CKEDITOR plugin pasteuploadpic 1.0 released
4.         * AUTHOR: Jacken(陈文光)
5.         * MAIL: chenjacken@gmail.com
6.         */  
7.        // 处理粘贴内容   
8.        var pasteService = function(evt) {  
9.            // 所见即所得模式,其他模式就退出   
10.            if (this.mode != 'wysiwyg')  
11.                return;  
12.            var data = evt.data['html'];  
13.            // 处理html内容   
14.            if (!data)  
15.                return;  
16.            // 检测本地文件地址的正则表达式   
17.            var localImgReg = //ig;   
18.          
19.            var imgArray = data.match(localImgReg);  
20.            // 是否有本地图片URL   
21.            if (imgArray) {  
22.                // 上传并处理编辑器内容   
23.                replaceEditor(uoloadPic(imgArray));  
24.          
25.            }  
26.          
27.          };  
28.            if (pasteuploadpic_url) {  
29.                // 监听事件   
30.                editor.on('paste', pasteService, null, null,1000);  
31.            }  
32.        /**
33.         * 配置处理图片上传的后台地址,如果不配置,此插件不会启用.
34.         *
35.         * @name CKEDITOR.config.pasteuploadpic_url
36.         * @type String
37.         * @default null
38.         * @since 1.0
39.         * @example config.pasteuploadpic_url='/ckeditorAction_upload.action';
40.         */  
41.        /**
42.         * 配置ActiveXObject名称
43.         *
44.         * @name CKEDITOR.config.pasteuploadpic_axo
45.         * @type String
46.         * @default 'Jacken.Word'
47.         * @since 1.0
48.         * @example config.pasteuploadpic_axo='/Jacken.Word';
49.         */</TEXTAREA><BR>  
后台如何处理BASE64
需要编写后台程序来获取BASE64码并转换成图片,保存到服务器,获得图片的网络绝对地址,并替换原编辑器内容的图片src。
Java用sun.misc.BASE64Decoder().decodeBuffer(String str)来奖Base64图片编码转换成字节。
PHP用base64_ decoder()。
四、已完成的功能和不足之处
在IE下借助ActiveX的功能,本人已经完成了粘贴图片到CKeditor,图片会自动上传功能。
完成ActiveX的程序;
完成CKeditor插件的编写(插件式,不影响升级CKeditor);
完成JAVA的J2EE后台处理BASE64码的转换,因为老师会多次复制和粘贴同一样内容,所以图片文件的存储会一定的压力,已经完成对文件进行MD5唯一性验证,同一样图片服务器上只存在一个实体图片文件。
此实现思路可以在其他的富文本编辑器下实现,只是编写不同的编辑器插件。
不足之处
必须要在IE下起作用,且必须安装ActiveX插件并允许执行。
其他浏览器暂时不能使用此方案。
似乎只能通过复杂word里面的内容粘贴才会响应上传。用QQ等直接截图后粘贴不了…..
以上IT文章《CKeditor编辑器直接word直接上传word里的图片》由名客技术网[www.121ask.com]提供阅读!
推广信息
推广信息
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3