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

最新推荐文章于 2023-09-05 16:22:07 发布

iteye_4458

最新推荐文章于 2023-09-05 16:22:07 发布

阅读量366

点赞数

分类专栏： J2EE 文章标签： fckeditor Office VC++ 正则表达式 Microsoft

J2EE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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