Pegando desde MS-Word a cualquier editor de HTML basado en navegador

Ok, no puedo ser el único con este problema que parece durar para siempre.Pegando desde MS-Word a cualquier editor de HTML basado en navegador

Utilizamos editores html basados en navegador (unos pocos) - cada uno tiene su propio botón 'pegar de palabra' que funciona muy bien.

Sin embargo, muchos de nuestros usuarios solo pegan directamente desde la palabra en el área de diseño. Para nosotros, esto da como resultado el fin del mundo: a veces rompe javascript u otras cosas demasiado numerosas como para mencionarlas.

Por lo tanto, he decidido escribir una función simple que busca el contenido del código fuente, y si ve algún carácter incorrecto que esté asociado con un microsoft word paste, para devolver una coincidencia de 'esto parece un ms-word paste '. Actualmente, parece que esto:

// 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; 
}

Tenga en cuenta que si intenta ejecutar el código, no va a funcionar porque (1) yo uso jQuery y (2) tengo un objeto especial ($ E) que se suma un montón de cosas para una cadena, una de ellas es una función 'contains()', pero se da una idea de lo que está haciendo.

Lo que estoy buscando son los elementos de la matriz que pertenecen a la matriz 'mala []'. He presentado una lista preliminar (que puede o no ser un buen punto de partida), pero les estoy preguntando expertos, por favor. ¿Pueden decirme qué caracteres o frases pondrían aquí? En este punto, si pudiera captar el 80% de los problemas, estaría extático.

Gracias.

Fuente

2011-05-03 OneNerd

CKEditor tiene esta comprobación en su lugar, tal vez eche un vistazo a su fuente, ya que está abierta. –

Recientemente estuve buscando algo similar después de buscar en Google encontré una buena función. Tiene la mayoría de las etiquetas malas en la lista. aquí está el enlace que contiene esa función:

Javascript Función

<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

todos los créditos a autor original.

Fuente

2011-05-03 18:54:37 ZeNo

No es un mal comienzo. Verá lo que otros tienen que decir, pero me ayudó un poco, así que le di un voto positivo. – OneNerd

@zeNo Funciona bien para Firefox/Chrome, pero en IE agrega una etiqueta "<" adicional que no sabe por qué. ¿Hay configuraciones/cambios específicos para IE solamente? – Gurvinder

@zoNO ¿Por qué se eliminan los títulos H1-H6? –

Tinymce tiene una bandera para esto al pegar.

Deberías echar un vistazo a the past_preprocess setting of the paste plugin.

Aquí puede acceder al contenido pegado usando 'o' y averiguar si el pegado provino de Word. Ejemplo:

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

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

estoy usando una función especial para deshacerse de las etiquetas no deseadas (que no era tan feliz por la forma predeterminada tinymce maneja esto - así que escribí mi propia).

Fuente

2011-05-04 10:06:13 Thariama

Pegando desde MS-Word a cualquier editor de HTML basado en navegador

Respuesta

Cuestiones relacionadas