在使用Web编辑器的时候,用户习惯使用Word 文档进行编辑,然后粘贴到Web编辑器里面再发布。发布过程中容易出现两个问题:
(1)Word文档中的内容粘贴到Web编辑器的时候,生成是VML的格式的文档,如果用户习惯于HTML的语法进行显示,则要捕获浏览器的粘贴事件并进行自定义的处理,自定义的处理方式一般是通过正则表达式进行查找替换。
//判断浏览器类型和版本 var BrowserInfo = new Object() ; BrowserInfo.MajorVer = navigator.appVersion.match(/MSIE (.)/)[1] ; BrowserInfo.MinorVer = navigator.appVersion.match(/MSIE ./.(.)/)[1] ; BrowserInfo.IsIE55OrMore = BrowserInfo.MajorVer >= 6 || ( BrowserInfo.MajorVer >= 5 && BrowserInfo.MinorVer >= 5 ) ;
//粘贴事件 function onPaste() { if (BrowserInfo.IsIE55OrMore) { var sHTML = GetClipboardHTML() ; var re = /</w[^>]* class="?MsoNormal"?/gi ; if ( re.test( sHTML ) ) { //清除word中自带的格式并粘贴 cleanHtml( sHTML ) ; return false ; } } else return true ; } //从剪贴板中获取内容 function GetClipboardHTML() { var oDiv = document.getElementById("tmpDiv") oDiv.innerHTML = "" ;
var oTextRange = document.body.createTextRange() ; oTextRange.moveToElementText(oDiv) ; oTextRange.execCommand("Paste") ;
var sData = oDiv.innerHTML ; oDiv.innerHTML = "" ;
return sData ; } //清除从word中粘贴自带的格式 function cleanHtml( html ) { //删除Class属性 html = html.replace(/<(/w[^>]*) class=([^ |>]*)([^>]*)/gi, "<$1$3") ; //删除Style属性 html = html.replace(/<(/w[^>]*) style="([^"]*)"([^>]*)/gi, "<$1$3") ; //删除Lang属性 html = html.replace(/<(/w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3") ; //删除 XML元素声明 html = html.replace(/<//?/?xml[^>]*>/gi, "") ; //删除 XML元素命名空间声明: <o:p></o:p> html = html.replace(/<//?/w+:[^>]*>/gi, "") return html; } |
(2)如果Word文档包含图片,则粘贴到Web编辑中的时候,图片无法显示。通过标签转换的方式可以实现。粘贴图片时生成的原始VML为如下格式:
<v:shape id=_x0000_i1025 style="WIDTH: 389.25pt; HEIGHT: 360.75pt" type="#_x0000_t75"> <v:imagedata o:title="" src="file:///C:/DOCUME~1/wang/LOCALS~1/Temp/msohtml1/01/clip_image001.png"> </v:imagedata> </v:shape>
|
可以根据原始的VML的shape标签和imagedata标签获取图片的width,height ,src等属性,替换为<IMG>标签,就可以在Web编辑器中显示图片了。