Javascript 将MS Word粘贴到任何基于浏览器的HTML编辑器中
好吧,我不可能是唯一一个有这个问题的人,这个问题似乎会永远持续下去 我们使用基于浏览器的html编辑器(几个不同的编辑器)——每个编辑器都有自己的“从word粘贴”按钮,效果非常好 然而,我们的许多用户只是直接从word粘贴到设计区域。对我们来说,这将导致世界末日的到来——有时它会破坏javascript或其他数不胜数的东西 因此,我决定编写一个简单的函数来搜索源代码的内容,如果它发现任何与microsoft word粘贴相关联的坏字符,则返回一个匹配项“this looks like a ms word paste”。目前看起来是这样的:Javascript 将MS Word粘贴到任何基于浏览器的HTML编辑器中,javascript,html,ms-word,tinymce,Javascript,Html,Ms Word,Tinymce,好吧,我不可能是唯一一个有这个问题的人,这个问题似乎会永远持续下去 我们使用基于浏览器的html编辑器(几个不同的编辑器)——每个编辑器都有自己的“从word粘贴”按钮,效果非常好 然而,我们的许多用户只是直接从word粘贴到设计区域。对我们来说,这将导致世界末日的到来——有时它会破坏javascript或其他数不胜数的东西 因此,我决定编写一个简单的函数来搜索源代码的内容,如果它发现任何与microsoft word粘贴相关联的坏字符,则返回一个匹配项“this looks like a ms
// detect potentially bad characters - usually from msword paste
function hasInvalidChars ( in_element ) {
var src = $j(in_element).val();
var e = $E(src); // enhanced string
var bad = Array( "mso-list:", "class=\"Mso", "</o:p>", "[if !supportLists]",
"style=\"mso-", "mso-bidi", "“", "”", "<v:shapetype", "<v:path",
"file:///" );
for ( i=0; i< bad.length; i++ ) {
if ( e.contains(bad[i]) ) {
return true;
}
}
return false;
}
//检测潜在的错误字符-通常来自msword粘贴
函数hasvalidchars(在元素中){
var src=$j(在元素中).val();
var e=$e(src);//增强型字符串
var bad=Array(“mso列表”,“类=\“mso”,“如果!支持列表]”,
“style=\”mso-“,”mso bidi“,”,“,”,”最近,我在谷歌上搜索了一个不错的函数,找到了类似的东西。它列出了大多数坏的标签。下面是包含该函数的链接:
Javascript函数
<script type="text/javascript" runat="server" language="javascript">
function CleanWordHTML( str )
{
str = str.replace(/<o:p>\s*<\/o:p>/g, "") ;
str = str.replace(/<o:p>.*?<\/o:p>/g, " ") ;
str = str.replace( /\s*mso-[^:]+:[^;"]+;?/gi, "" ) ;
str = str.replace( /\s*MARGIN: 0cm 0cm 0pt\s*;/gi, "" ) ;
str = str.replace( /\s*MARGIN: 0cm 0cm 0pt\s*"/gi, "\"" ) ;
str = str.replace( /\s*TEXT-INDENT: 0cm\s*;/gi, "" ) ;
str = str.replace( /\s*TEXT-INDENT: 0cm\s*"/gi, "\"" ) ;
str = str.replace( /\s*TEXT-ALIGN: [^\s;]+;?"/gi, "\"" ) ;
str = str.replace( /\s*PAGE-BREAK-BEFORE: [^\s;]+;?"/gi, "\"" ) ;
str = str.replace( /\s*FONT-VARIANT: [^\s;]+;?"/gi, "\"" ) ;
str = str.replace( /\s*tab-stops:[^;"]*;?/gi, "" ) ;
str = str.replace( /\s*tab-stops:[^"]*/gi, "" ) ;
str = str.replace( /\s*face="[^"]*"/gi, "" ) ;
str = str.replace( /\s*face=[^ >]*/gi, "" ) ;
str = str.replace( /\s*FONT-FAMILY:[^;"]*;?/gi, "" ) ;
str = str.replace(/<(\w[^>]*) class=([^ |>]*)([^>]*)/gi, "<$1$3") ;
str = str.replace( /<(\w[^>]*) style="([^\"]*)"([^>]*)/gi, "<$1$3" ) ;
str = str.replace( /\s*style="\s*"/gi, '' ) ;
str = str.replace( /<SPAN\s*[^>]*>\s* \s*<\/SPAN>/gi, ' ' ) ;
str = str.replace( /<SPAN\s*[^>]*><\/SPAN>/gi, '' ) ;
str = str.replace(/<(\w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3") ;
str = str.replace( /<SPAN\s*>(.*?)<\/SPAN>/gi, '$1' ) ;
str = str.replace( /<FONT\s*>(.*?)<\/FONT>/gi, '$1' ) ;
str = str.replace(/<\\?\?xml[^>]*>/gi, "") ;
str = str.replace(/<\/?\w+:[^>]*>/gi, "") ;
str = str.replace( /<H\d>\s*<\/H\d>/gi, '' ) ;
str = str.replace( /<H1([^>]*)>/gi, '' ) ;
str = str.replace( /<H2([^>]*)>/gi, '' ) ;
str = str.replace( /<H3([^>]*)>/gi, '' ) ;
str = str.replace( /<H4([^>]*)>/gi, '' ) ;
str = str.replace( /<H5([^>]*)>/gi, '' ) ;
str = str.replace( /<H6([^>]*)>/gi, '' ) ;
str = str.replace( /<\/H\d>/gi, '<br>' ) ; //remove this to take out breaks where Heading tags were
str = str.replace( /<(U|I|STRIKE)> <\/\1>/g, ' ' ) ;
str = str.replace( /<(B|b)> <\/\b|B>/g, '' ) ;
str = str.replace( /<([^\s>]+)[^>]*>\s*<\/\1>/g, '' ) ;
str = str.replace( /<([^\s>]+)[^>]*>\s*<\/\1>/g, '' ) ;
str = str.replace( /<([^\s>]+)[^>]*>\s*<\/\1>/g, '' ) ;
//some RegEx code for the picky browsers
var re = new RegExp("(<P)([^>]*>.*?)(<\/P>)","gi") ;
str = str.replace( re, "<div$2</div>" ) ;
var re2 = new RegExp("(<font|<FONT)([^*>]*>.*?)(<\/FONT>|<\/font>)","gi") ;
str = str.replace( re2, "<div$2</div>") ;
str = str.replace( /size|SIZE = ([\d]{1})/g, '' ) ;
return str ;
}
</script>
函数CleanWordHTML(str)
{
str=str.replace(/\s*/g,“”);
str=str.replace(/.*?/g,“”);
str=str.replace(/\s*mso-[^:::+:[^;“]+;?/gi,”);
str=str.replace(/\s*边距:0cm 0cm 0pt\s*;/gi,”);
str=str.replace(/\s*边距:0cm 0cm 0pt\s*“/gi,\”);
str=str.replace(/\s*文本缩进:0cm\s*;/gi,”);
str=str.replace(/\s*文本缩进:0cm\s*“/gi,\”);
str=str.replace(/\s*TEXT-ALIGN:[^\s;]+;?“/gi,\”);
str=str.replace(/\s*PAGE-BREAK-BEFORE:[^\s;]+;?“/gi,\”);
str=str.replace(/\s*FONT-VARIANT:[^\s;]+;?“/gi,\”);
str=str.replace(/\s*制表位:[^;“]*;?/gi,”);
str=str.replace(/\s*制表位:[^“]*/gi,”);
str=str.replace(/\s*face=“[^”]*”/gi,”);
str=str.replace(/\s*face=[^>]*/gi,”);
str=str.replace(/\s*FONT-FAMILY:[^;“]*;?/gi,”);
str=str.replace(/]*)class=([^>]*)([^>]*)/gi,“]*)/gi,“*?”,“gi”);
str=str.replace(re),Tinymce在粘贴时对此有一个标志
你应该看看
在这里,您可以使用“o”访问粘贴的内容,并确定粘贴是否来自Word。
例如:
我正在使用一个特殊的函数来去除不需要的标签(我对tinymce处理这个问题的默认方式不太满意,所以我自己写了一个).CKEditor已经做好了这项检查,也许可以看看他们的源代码,因为它是开放的。这是一个不错的开始。我会看看其他人怎么说,但帮了一点忙,所以给了你一个赞成票。@zeNo对Firefox/Chrome很好,但在IE中添加了额外的“@zoNO为什么删除标题H1-H6?”?
paste_preprocess : function(pl, o) {
//if(console) console.log('content', o);
if (o.wordContent ) {
alert('paste from WORD detected!!!');
}
...
},