Вставка из MS-Word в любой браузерный HTML-редактор - PullRequest
Новая
       8

Вставка из MS-Word в любой браузерный HTML-редактор

6 голосов
/ 03 мая 2011

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

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

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

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

// 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% проблем, я был бы в восторге.

Спасибо.

Ответы [ 2 ]

9 голосов
/ 03 мая 2011

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

Функция 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

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

2 голосов
/ 04 мая 2011

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

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

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

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

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

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

...