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

liuhanjun

浏览: 47794 次
性别:
来自: 海口

最近访客更多访客>>

linzm1990

dzh535006103

tanyh

xiaozhangju

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE

fckeditor Office VC++正则表达式 Microsoft

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控件，完成这个功能。水平有限，如有谬误之处，还望方家不吝赐教。

分享到：

ibatis深度映射的bug及处理办法 | EL表达式Map取值的隐含问题

2011-01-27 16:28
浏览 5213
评论(11)
论坛回复 / 浏览 (11 / 15085)
分类:Web前端
查看更多

11 楼 lteb2002 2014-03-04

今天才发现您的文章，我们对这个问题有共同思路，我们已经实现了，参考地址：
http://test.reremouse.com/wordimg/

10 楼 liuhanjun 2011-12-20

鉴于有些博友要求提供ocx控件以作参考，现提供链接下载。http://www.0898tj.com/fckeditor/fckeditor.cab

9 楼 liuhanjun 2011-04-09

zb7503 写道

liuhanjun 写道

zb7503 写道

能不能共享一下代码。想学习一下。谢谢！

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

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

沙箱机制的限制，恐怕是不可能的。

8 楼 liuhanjun 2011-04-09

RobustTm 写道

能不能将步骤讲的清楚些，我把那段代码替换了还是不行，谢谢！

应该不会吧。当然，只修改fck_paste.html仅仅可以显示word中粘贴过来的图片公式等，而不能自动上传，要想自动上传到服务器，需要activex控件。为了方便，上传fck_paste.html，注意：中文注释下面的代码是额外添加的，酌情取舍。

7 楼 zb7503 2011-04-01

liuhanjun 写道

zb7503 写道

能不能共享一下代码。想学习一下。谢谢！

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

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

6 楼 RobustTm 2011-03-31

能不能将步骤讲的清楚些，我把那段代码替换了还是不行，谢谢！

5 楼 liuhanjun 2011-03-17

zb7503 写道

能不能共享一下代码。想学习一下。谢谢！

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

4 楼 liuhanjun 2011-03-17

cuixiping 写道

to liuhanjun：

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

谢谢提醒，但是现在的IE8和IE9对安全原来越重视了，不签名的ocx控件，不是加代码就可以蒙混的，今时不同往昔啊。

3 楼 zb7503 2011-02-16

能不能共享一下代码。想学习一下。谢谢！

2 楼 cuixiping 2011-02-16

to liuhanjun：

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

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，可以留言一起探讨。好了，睡觉去先～～～

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论