Блог

Хорошо, я не могу быть единственным с этой проблемой, которая, кажется, будет продолжаться вечно.

Мы используем браузерные html-редакторы (несколько разных) — у каждого есть своя кнопка «вставить из word», которая отлично работает.

Однако многие наши пользователи просто вставляют непосредственно из word в область дизайна. Для нас это приводит к концу света — иногда это нарушает работу javascript или других вещей, которых слишком много, чтобы упоминать.

Итак, я решил написать простую функцию, которая выполняет поиск по содержимому исходного кода и, если она видит какие-либо неправильные символы, связанные со вставкой microsoft Word, выдает совпадение «это похоже на вставку 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% проблем, я был бы в восторге.

Спасибо.

Недавно я искал похожую вещь, немного погуглив, я нашел приятную функцию. В нем содержится большинство из перечисленных плохих тегов. вот ссылка, которая содержит эту функцию:

Функция 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, "amp;nbsp;") ;
str = str.replace( /s*mso-[^:] :[^;"] ;?/gi, "" ) ;
str = str.replace( /s*MARGIN: 0cm 0cm 0pts*;/gi, "" ) ;
str = str.replace( /s*MARGIN: 0cm 0cm 0pts*"/gi, """ ) ;
str = str.replace( /s*TEXT-INDENT: 0cms*;/gi, "" ) ;
str = str.replace( /s*TEXT-INDENT: 0cms*"/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( /<SPANs*[^>]*>s*amp;nbsp;s*</SPAN>/gi, 'amp;nbsp;' ) ;
str = str.replace( /<SPANs*[^>]*></SPAN>/gi, '' ) ;
str = str.replace(/<(w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3") ;
str = str.replace( /<SPANs*>(.*?)</SPAN>/gi, '$1' ) ;
str = str.replace( /<FONTs*>(.*?)</FONT>/gi, '$1' ) ;
str = str.replace(/<\??xml[^>]*>/gi, "") ;
str = str.replace(/</?w :[^>]*>/gi, "") ;
str = str.replace( /<Hd>s*</Hd>/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( /</Hd>/gi, '<br>' ) ; //remove this to take out breaks where Heading tags were
str = str.replace( /<(U|I|STRIKE)>amp;nbsp;</1>/g, 'amp;nbsp;' ) ;
str = str.replace( /<(B|b)>amp;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

все кредиты автору оригинала.

У Tinymce есть флаг для этого при вставке.

Вам следует взглянуть на настройку past_preprocess плагина вставки.

Здесь вы можете получить доступ к вставляемому содержимому с помощью ‘o’ и узнать, была ли вставка взята из Word. Пример:

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

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

Я использую специальную функцию для избавления от нежелательных тегов (мне не очень понравился способ, которым tinymce обрабатывает это по умолчанию, поэтому я написал свой собственный).