javascript - 从 MS-Word 粘贴到任何基于浏览器的 HTML 编辑器

标签 javascript html ms-word tinymce

好吧,我不能是唯一遇到这个似乎永远存在的问题的人。

我们使用基于浏览器的 html 编辑器(几个不同的编辑器)- 每个都有自己的“从单词粘贴”按钮,效果很好。

但是,我们的许多用户只是直接从 word 粘贴到设计区域。对我们来说,这会导致世界末日——有时它会破坏 javascript 或其他不胜枚举的东西。

因此,我决定编写一个简单的函数来搜索源代码的内容,如果它发现任何与 Microsoft Word 粘贴相关的错误字符,则返回匹配项“这看起来像一个 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;
}

请注意,如果您尝试运行代码,它将无法运行,因为 (1) 我使用 jQuery 并且 (2) 我有一个特殊对象 ( $E ) 可以将一堆东西添加到字符串中,其中一个是“contains()”函数,但您知道它在做什么。

我要查找的是属于“bad[]”数组的数组元素。我已经提出了一个初步列表(这可能是也可能不是一个好的起点),但我想问问你们那里的专家——拜托——你能告诉我你会把哪些字符或短语放在这里吗?此时,如果我能捕获 80% 的问题,我会欣喜若狂。

谢谢。

最佳答案

最近我在谷歌搜索后寻找类似的东西,我发现了一个不错的功能。它列出了大部分标签。这是包含该功能的链接:

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, "&nbsp;") ;
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*&nbsp;\s*<\/SPAN>/gi, '&nbsp;' ) ;
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)>&nbsp;<\/\1>/g, '&nbsp;' ) ;
str = str.replace( /<(B|b)>&nbsp;<\/\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>

http://www.1stclassmedia.co.uk/developers/clean-ms-word-formatting.php

所有版权归原作者所有。

关于javascript - 从 MS-Word 粘贴到任何基于浏览器的 HTML 编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5872982/

相关文章:

javascript - 将具有相同值的对象推送到数组

javascript - 解析 2 个文本之间的字符串

html - 3列表作为DIV

javascript - 如何将 CSS 变换矩阵转换回其组件属性

c# - 逐行读取word文档

javascript - Puppeteer 无法单击 DOM 中 XPath 指定的元素

javascript - 如何检测 html 元素是否可以附加子节点?

html - margin 计算的困惑

r - 将基本图形从 R Studio 复制粘贴到 Word 文档的简便方法

php - 使用 php 或 ruby​​ 在 linux 中操作 word 文档(doc、docx 等)