web编辑器过滤word文档信息时出现的问题
昨天帮同事修改一条新闻的内容,使用的是ewebeditor编辑器,发现如果内容全部为英文的时候,粘贴进入编辑器后会自动添加上<font face=Verdana>,指定字体样式的代码,⊙﹏⊙b汗。这样就和页面原始指定的字体不一样了。
后面查看了ewebeditor编辑器的代码,发现ewebeditor在IE下为了过滤word文档粘贴进来的内容,对剪贴板的内容进行了处理,然后判断是否包含word文档的html标记。就是经过这样的处理,导致IE浏览器自动加上那个了字体样式的标签<font face=Verdana>。
ewebeditor原来的代码如下
+展开
-JavaScript
// 取剪粘板中的HTML格式数据
function GetClipboardHTML() {
var oDiv = document.getElementById("eWebEditor_Temp_HTML")
oDiv.innerHTML = "";
var oTextRange = document.body.createTextRange();
oTextRange.moveToElementText(oDiv) ;
oTextRange.execCommand("Paste");//就是执行这句后IE给全部为英文的部分自动添加字体Verdana
var sData = oDiv.innerHTML ;
oDiv.innerHTML = "" ;
return sData;
}
// 粘贴时自动检测是否来源于Word格式
eWebEditor.document.body.onpaste = onPaste ;
function onPaste() {
if (sCurrMode=="VIEW") return false;
if (sCurrMode=="EDIT"){
var sHTML = GetClipboardHTML() ;
if (config.AutoDetectPasteFromWord && BrowserInfo.IsIE55OrMore) {
var re = /<\w[^>]* class="?MsoNormal"?/gi ;
if ( re.test(sHTML)){
if ( confirm( "你要粘贴的内容好象是从Word中拷出来的,是否要先清除Word格式再粘贴?" ) ){
cleanAndPaste( sHTML ) ;
return false ;
}
}
}
eWebEditor.document.selection.createRange().pasteHTML(sHTML);
return false;
}else{
eWebEditor.document.selection.createRange().pasteHTML(HTMLEncode( clipboardData.getData("Text"))) ;
return false;
}
}
function GetClipboardHTML() {
var oDiv = document.getElementById("eWebEditor_Temp_HTML")
oDiv.innerHTML = "";
var oTextRange = document.body.createTextRange();
oTextRange.moveToElementText(oDiv) ;
oTextRange.execCommand("Paste");//就是执行这句后IE给全部为英文的部分自动添加字体Verdana
var sData = oDiv.innerHTML ;
oDiv.innerHTML = "" ;
return sData;
}
// 粘贴时自动检测是否来源于Word格式
eWebEditor.document.body.onpaste = onPaste ;
function onPaste() {
if (sCurrMode=="VIEW") return false;
if (sCurrMode=="EDIT"){
var sHTML = GetClipboardHTML() ;
if (config.AutoDetectPasteFromWord && BrowserInfo.IsIE55OrMore) {
var re = /<\w[^>]* class="?MsoNormal"?/gi ;
if ( re.test(sHTML)){
if ( confirm( "你要粘贴的内容好象是从Word中拷出来的,是否要先清除Word格式再粘贴?" ) ){
cleanAndPaste( sHTML ) ;
return false ;
}
}
}
eWebEditor.document.selection.createRange().pasteHTML(sHTML);
return false;
}else{
eWebEditor.document.selection.createRange().pasteHTML(HTMLEncode( clipboardData.getData("Text"))) ;
return false;
}
}
为了和页面样式表指定的样式一致,只好替换掉font标签了,需该后的代码如下
+展开
-JavaScript
// 取剪粘板中的HTML格式数据
function GetClipboardHTML() {
var oDiv = document.getElementById("eWebEditor_Temp_HTML")
oDiv.innerHTML = "";
var oTextRange = document.body.createTextRange();
oTextRange.moveToElementText(oDiv) ;
oTextRange.execCommand("Paste");
var sData = oDiv.innerHTML ;
oDiv.innerHTML = "" ;
//alert(sData)
sData = sData.replace(/<\/?(font)[^>]*>/ig,'');//===========替换font标签
//alert(sData)
return sData;
}
function GetClipboardHTML() {
var oDiv = document.getElementById("eWebEditor_Temp_HTML")
oDiv.innerHTML = "";
var oTextRange = document.body.createTextRange();
oTextRange.moveToElementText(oDiv) ;
oTextRange.execCommand("Paste");
var sData = oDiv.innerHTML ;
oDiv.innerHTML = "" ;
//alert(sData)
sData = sData.replace(/<\/?(font)[^>]*>/ig,'');//===========替换font标签
//alert(sData)
return sData;
}
经过修改是可以和页面指定的默认样式一致了。不过有个小问题,如果复制的内容里面包含了font标签,非IE自动生成的,也会替换掉~
加支付宝好友偷能量挖...
原创文章,转载请注明出处:web编辑器过滤word文档信息时出现的问题