從MS-Word粘貼到任何基於瀏覽器的HTML編輯器

好吧，我不能是唯一一個這個問題似乎永遠持續下去的問題。從MS-Word粘貼到任何基於瀏覽器的HTML編輯器

我們使用基於瀏覽器的html編輯器（幾個不同的編輯器） - 每個人都有自己的「從文字上粘貼」按鈕，效果很好。

但是，我們的許多用戶只是直接從單詞粘貼到設計區域。對我們來說，這會導致世界末日 - 有時它會打破JavaScript或其他不可多得的事情。

因此，我決定編寫一個簡單的函數來搜索源代碼的內容，並且如果它看到任何與微軟字粘貼關聯的錯誤字符，則返回「this this match like a ms-word粘貼「。目前，它看起來像這樣：

// 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％的問題，我會欣喜若狂。

謝謝。

來源

2011-05-03 OneNerd

CKEditor已經有了這個檢查，也許看看他們的來源，因爲它是開放的。 – 2011-05-03 17:03:53

最近我在尋找類似的東西后，谷歌搜索我發現一個很好的功能。它有大部分不好的標籤列出。這裏是包含該功能的鏈接：

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

所有學分原作者所有。

來源

2011-05-03 18:54:37 ZeNo

不錯的開始。會看到別人說什麼，但有一點幫助，所以給了你一個投票。 – OneNerd 2011-05-03 19:10:36

@zeNo適用於Firefox/Chrome，但在IE中添加額外的「<」標籤不知道爲什麼，IE瀏覽器是否有任何特定的設置/更改？ – Gurvinder 2013-05-13 14:30:27

@zoNO爲什麼要刪除標題H1-H6？ – 2016-11-17 16:28:00

Tinymce在粘貼時有此標誌。你可以看看the past_preprocess setting of the paste plugin。

在這裏，您可以使用'o'訪問粘貼的內容，並確定粘貼是否來自Word。例子：

paste_preprocess : function(pl, o) { 
    //if(console) console.log('content', o); 

    if (o.wordContent) { 
      alert('paste from WORD detected!!!'); 
    } 
    ... 
},

我使用一個特殊的函數來擺脫不必要的標籤（我是不是默認的方式TinyMCE的，開心處理這一點 - 所以我寫了我自己）。

來源

2011-05-04 10:06:13 Thariama

從MS-Word粘貼到任何基於瀏覽器的HTML編輯器

回答

相關問題