在使用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编辑器中显示图片了。