word中表格复制到在线编辑器字体重叠问题解决(javaeye也有此问题)
项目中用了在线编辑器,类似javaeye发布文章的,出现字体重叠现象,(我们项目用的是richtxt),在网络上搜索了几十个在线编辑器,都出现下列问题(网易博客的在线编辑器不出现,但源码找不到):
?
<!-- [if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument></xml><![endif]--><!-- [if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> <w:LsdException Locked="false" Name="Default Paragraph Font"/> </w:LatentStyles></xml><![endif]--><!-- /* Font Definitions */ @font-face{font-family:宋体;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:SimSun;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:Verdana;panose-1:2 11 6 4 3 5 4 4 2 4;mso-font-charset:0;mso-generic-font-family:swiss;mso-font-pitch:variable;mso-font-signature:536871559 0 0 0 415 0;}@font-face{font-family:"\@宋体";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;text-align:justify;text-justify:inter-ideograph;mso-pagination:none;font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;}p.CharCharCharCharCharCharCharCharCharCharCharCharCharCharChar1CharCharCharChar, li.CharCharCharCharCharCharCharCharCharCharCharCharCharCharChar1CharCharCharChar, div.CharCharCharCharCharCharCharCharCharCharCharCharCharCharChar1CharCharCharChar{mso-style-name:" Char Char Char Char Char Char Char Char Char Char Char Char Char Char Char1 Char Char Char Char";mso-style-link:默认段落字体;margin-top:0cm;margin-right:0cm;margin-bottom:8.0pt;margin-left:0cm;line-height:12.0pt;mso-line-height-rule:exactly;mso-pagination:widow-orphan;font-size:10.0pt;font-family:Verdana;mso-fareast-font-family:宋体;mso-bidi-font-family:"Times New Roman";mso-fareast-language:EN-US;} /* Page Definitions */ @page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section1{size:612.0pt 792.0pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:36.0pt;mso-footer-margin:36.0pt;mso-paper-source:0;}div.Section1{page:Section1;}--><!-- [if gte mso 10]><style> /* Style Definitions */ table.MsoNormalTable{mso-style-name:普通表格;mso-tstyle-rowband-size:0;mso-tstyle-colband-size:0;mso-style-noshow:yes;mso-style-parent:"";mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-para-margin:0cm;mso-para-margin-bottom:.0001pt;mso-pagination:widow-orphan;font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family:"Times New Roman";mso-ansi-language:#0400;mso-fareast-language:#0400;mso-bidi-language:#0400;}</style><![endif]-->
广州市经宇文化发展有限公司
?
通过查看和比较word代码,发现样式表中有一个line-height属性影响了此问题,因为在项目中用的是richtxt,所以在editor.js中修改下面代码可以解决此问题,见红色部分:
?
if(pasteData && pasteData.length > 0) {
??? ??? ??? ??? ??? var wordPattern = /<\w[^>]* class="?MsoNormal"?/gi;
??? ??? ??? ??? ??? if(wordPattern.test(pasteData)) {
??? ??? ??? ??? ??? ??? if(confirm("文章有多余代码,可能影响顺利发表,是否确认清除?\r\n\r\n提示:您的文字将完整保留。")) {
??? ??? ??? ??? ??? ??? ??? pasteData = clearFromWord(pasteData);
??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? else {???
??? ??? ??? ??? ??? ??? ??? pasteData = pasteData.replace(/<img+.[^>]*>/gi, "");
??? ??? ??? ??? ??? ??? ??? pasteData = pasteData.replace(/<\/?\w+:imagedata[^>]*>/gi, "");
??? ??? ??? ??? ??? ??? ??? pasteData = pasteData.replace(/<\/?\w+:shape[^>]*>/gi, "");
??? ??? ??? ??? ??? ??? ?
??? ??? ??? ??? ??? ??? ??? var reg=new RegExp("LINE-HEIGHT:[^s]*\;?","gi");
??? ??? ??? ??? ??? ??? ??? pasteData = pasteData.replace(reg, "");
??? ??? ??? ??? ??? ??? ??
??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? var oRTE = _this.iframe.contentWindow;
??? ??? ??? ??? ??? var oRng = oRTE.document.selection.createRange();
??? ??? ??? ??? ??? oRng.pasteHTML(pasteData);
??? ??? ??? ??? }