当前位置: 代码迷 >> Web前端 >> 改建fckeditor以支持word中图片复制粘贴的思考
  详细解决方案

改建fckeditor以支持word中图片复制粘贴的思考

热度:217   发布时间:2012-10-16 09:57:37.0
改造fckeditor以支持word中图片复制粘贴的思考

??? fckeditor就不用多说了,那是相当的强悍啊,就是貌似加载速度有点慢,一个页面有3个ToolbarSets["Default"]的textarea,就明显觉得好慢啊,虽然做了一定的裁减,把form相关的toolbar去掉了,还是慢,看哪位哥们有什么妙招可记得告诉我。不过我这里想说的不是fckeditor速度的问题,而是不能很好地支持word中图片、公式和绘图的复制粘贴,这个大家也知道,如果含有这些元素,粘贴进fckeditor就自动没了。ewebeditor就做得不错,自动上传word中的图片、公式和绘图这些,转化成img标签,东西是好,可惜要银子的哈,貌似还不便宜,咱做个单子也就几千,买这个授权花掉几千,没得挣咯(声明:本人绝对没有不尊重知识产权的意思,相反,本人极力反对“用软件不花钱”――盗版的社会陋习)。

??? 以下纯粹探讨性质,本人并不精通js:

1、首先要弄明白fckeditor粘贴了word中的文档后,代码是怎么样的。粗看了一下fckeditor源码,貌似word并非纯文本,所以复制以后进入到剪贴板,要用raw paste粘贴。

??? word中的图片:

<v:imagedata o:title="aaa" src = 
  "file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image003.png"></v:imagedata>

?

利用正则找出所有的<v:imagedata>不是难事,但是要自动上传,本人原本准备隐藏一个form用input file来自动赋值,然后submit,但是由于security issue,input file的value是只读的,不可动态赋值,那叫一个郁闷啊,不过想想也是,要是js这事都可以干,那互联网就没人敢用了,太不安全了,重要的文件将很轻松地被不怀好意的程序员轻松获取,那叫一个恐怖啊!看来不采用activex控件是没有可能咯。

??? word中的公式:

<v:imagedata o:title="" src = "file:///C:\DOCUME~1\ADMINI~\LOCALS~1\Temp\msohtml1\01\clip_image001.wmz">
</v:imagedata>

?跟图片没啥区别,就是压缩成wmz或者emz了,这对java来说,小菜一碟,用自带的GzipInputStream解压即可。

??? word中的绘图:

<v:group> 。。。<v:shapetype.../> <v:shape.../> <v:rect.../> <v:oval.../> <v:line.../>。。。</v:group>

?

2、类似于这样的标签,显然不是w3的标准,需要加入

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="aaa.files/filelist.xml">
<link rel=Edit-Time-Data href="aaa.files/editdata.mso">
<link rel=OLE-Object-Data href="aaa.files/oledata.mso">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->

?

类似的头部才行。

3、本着这个思路,先解决在fckeditor中粘贴word不能显示图片、公式等元素的问题。打开fck_paste.html文件,找到并修改

oDoc.write('<html><head><scr' + 'ipt>window.onerror = function() { return true ; };<\/script><\/head><body><\/body><\/html>') ;

?

			//加入IE显示公式和图片所必需的xmlns和style,否则不能显示
			oDoc.write('<html xmlns:v=\'urn:schemas-microsoft-com:vml\'' +  
					' xmlns:o=\'urn:schemas-microsoft-com:office:office\'' +
					' xmlns:w=\'urn:schemas-microsoft-com:office:word\'' +
					' xmlns=\'http:\/\/www.w3.org\/TR\/REC-html40\'>' +
					' <head>' +
					'<!--[if !mso]>' +
					'<style>' +
					'v\\:* {behavior:url(#default#VML);}' +
					'o\\:* {behavior:url(#default#VML);}' +
					'w\\:* {behavior:url(#default#VML);}' +
					'.shape {behavior:url(#default#VML);}' +
					'<\/style>' +
					'<![endif]-->' +
					'<scr' + 'ipt>window.onerror = function() { return true ; };<\/script><\/head><body><\/body><\/html>') ;

?

这样就解决了fckeditor粘贴窗口显示图片、公式、绘图等元素的问题。

?

总结:以上可以解决fckeditor的粘贴显示问题,但是上传到服务器以后,必须解决本地的那些图片、wmz之类的文件要自动上传到服务器,否则也是枉然,而要解决这样的问题,必须依靠第三方控件,目前本人正在测试用vc++写的activex控件,完成这个功能。水平有限,如有谬误之处,还望方家不吝赐教。

1 楼 liuhanjun 2011-02-13  
    过年期间,啥也没干,这两天再捡起fckeditor控件的问题,终于解决了从word复制粘贴自动上传图片、公式、绘图的问题。正如前所说,图片和公式相对好处理,word绘图产生的图片就比较麻烦,因为没有生成本地图片文件,只好用vc++按CF_HTML读取剪切板的内容,这里可以看到绘图生成了图片文件。这里有点迷糊:IE的粘贴和VC的CF_HTML读取竟然不一样,why?算了,懒得管了。去掉乱七八糟的html代码后返回给fckeditor,然后fckeditor再调用vc++控件进行上传,走曲线了,按理说可以由VC完成读取、正则解析、上传、正则替换,最后回传给fckeditor,这样应该好些。没办法,不熟悉ATLRX正则表达式,也不想去下载正则库,以免控件过大,就这样吧。
    ocx控件是做好了,郁闷的是没有签名证书,IE拒绝安装自动下载安装cab,吐血!没办法,做个exe让用户手动下载安装了。但是N不爽啊,一冲动想去wosign买个签名证书,1年的要1388元人民币整,思来想去,囊中羞涩,拉倒了!先留钱买饭吃,以后再说罢。
    有这方面需求和兴趣的XDJM,可以留言一起探讨。好了,睡觉去先~~~
2 楼 cuixiping 2011-02-16  
to liuhanjun:

ocx控件的签名证书问题,只要加一段代码就可以了,许多年前我用vb写ocx的时候做过,这个你可以网上查。
3 楼 zb7503 2011-02-16  
能不能共享一下代码。想学习一下。谢谢!
4 楼 liuhanjun 2011-03-17  
cuixiping 写道
to liuhanjun:

ocx控件的签名证书问题,只要加一段代码就可以了,许多年前我用vb写ocx的时候做过,这个你可以网上查。

谢谢提醒,但是现在的IE8和IE9对安全原来越重视了,不签名的ocx控件,不是加代码就可以蒙混的,今时不同往昔啊。
5 楼 liuhanjun 2011-03-17  
zb7503 写道
能不能共享一下代码。想学习一下。谢谢!


代码共享是好主意,只是产权属于公司,被leader知道了,我就变鱿鱼了。
6 楼 RobustTm 2011-03-31  
能不能将步骤讲的清楚些,我把那段代码替换了还是不行,谢谢!
7 楼 zb7503 2011-04-01  
liuhanjun 写道
zb7503 写道
能不能共享一下代码。想学习一下。谢谢!


代码共享是好主意,只是产权属于公司,被leader知道了,我就变鱿鱼了。


不知道applet能不能读取word中的图片,并进行上传。
8 楼 liuhanjun 2011-04-09  
RobustTm 写道
能不能将步骤讲的清楚些,我把那段代码替换了还是不行,谢谢!

应该不会吧。当然,只修改fck_paste.html仅仅可以显示word中粘贴过来的图片公式等,而不能自动上传,要想自动上传到服务器,需要activex控件。为了方便,上传fck_paste.html,注意:中文注释下面的代码是额外添加的,酌情取舍。
9 楼 liuhanjun 2011-04-09  
zb7503 写道
liuhanjun 写道
zb7503 写道
能不能共享一下代码。想学习一下。谢谢!


代码共享是好主意,只是产权属于公司,被leader知道了,我就变鱿鱼了。


不知道applet能不能读取word中的图片,并进行上传。

沙箱机制的限制,恐怕是不可能的。
10 楼 liuhanjun 2011-12-20  
鉴于有些博友要求提供ocx控件以作参考,现提供链接下载。http://www.0898tj.com/fckeditor/fckeditor.cab
  相关解决方案