Limpiar el texto pegado de Microsoft Word usando JavaScript

Question

Estoy usando un 'contenteditable' <div/> y permite pegar.

Es increíble la cantidad de código de marcado que se pega desde una copia del portapapeles de Microsoft Word. Estoy batallando con esto, y he conseguido aproximadamente 1/2 camino allí usando la función stripTags() de Prototypes (que desafortunadamente no parece permitirme mantener algunas etiquetas).

Sin embargo, incluso después de eso, terminé con una cantidad alucinante de código de marcado innecesario.

Así que mi pregunta es, ¿hay alguna función (usando JavaScript), o el enfoque que puedo usar que limpiará la mayoría de este marcado innecesario?

Answer 1

Esta es la función que terminé escribiendo que hace el trabajo bastante bien (por lo que puedo decir de todos modos).

Estoy ciertamente abierto a sugerencias de mejora si alguien tiene alguna. Gracias.

function cleanWordPaste(in_word_text) { 
var tmp = document.createElement("DIV"); 
tmp.innerHTML = in_word_text; 
var newString = tmp.textContent||tmp.innerText; 
// this next piece converts line breaks into break tags 
// and removes the seemingly endless crap code 
newString = newString.replace(/\n\n/g, "<br />").replace(/.*<!--.*-->/g,""); 
// this next piece removes any break tags (up to 10) at beginning 
for (i=0; i<10; i++) { 
    if (newString.substr(0,6)=="<br />") { 
    newString = newString.replace("<br />", ""); 
    } 
} 
return newString; 
} 

la esperanza que esto sea útil para algunos de ustedes.

Answer 2

¿Qué tal tener un botón "pegar como texto plano" que muestra un <textarea>, lo que permite al usuario pegar el texto allí? de esa forma, todas las etiquetas serán despojadas por ti. Eso es lo que hago con mi CMS; Dejé de tratar de limpiar el desorden de Word.

Answer 3

Puede usar el CKEditor completo que limpia en pasta o look at the source.

Answer 4

¿Podría pegar en un área de texto oculta, copiar desde el mismo texto y pegar en su destino?

Answer 5

Odio decirlo, pero finalmente me rendí haciendo que TinyMCE manejara Word crap como yo quería. Ahora me acaban de enviar un correo electrónico cada vez que la entrada de un usuario contiene cierto HTML (busque <span lang="en-US"> por ejemplo) y lo corrijo manualmente.

Answer 6

Hice algo así hace mucho tiempo, donde totalmente limpio las cosas en un editor de texto enriquecido y etiquetas de fuente convertidas a estilos, brs a p, etc., para mantenerlo constante entre los navegadores y evitar que ciertas cosas feas lleguen en vía pegar. Tomé mi función recursiva y arranqué la mayor parte excepto la lógica central, este podría ser un buen punto de partida ("resultado" es un objeto que acumula el resultado, que probablemente tome un segundo pase para convertirse en una cadena), si eso es lo que necesita:

var cleanDom = function(result, n) { 
var nn = n.nodeName; 
if(nn=="#text") { 
    var text = n.nodeValue; 

    } 
else { 
    if(nn=="A" && n.href) 
     ...; 
    else if(nn=="IMG" & n.src) { 
     .... 
     } 
    else if(nn=="DIV") { 
     if(n.className=="indent") 
      ... 
     } 
    else if(nn=="FONT") { 
     }  
    else if(nn=="BR") { 
     } 

    if(!UNSUPPORTED_ELEMENTS[nn]) { 
     if(n.childNodes.length > 0) 
      for(var i=0; i<n.childNodes.length; i++) 
       cleanDom(result, n.childNodes[i]); 
     } 
    } 
} 

Answer 7

estoy usando esto:

$(body_doc).find('body').bind('paste',function(e){ 
       var rte = $(this); 
       _activeRTEData = $(rte).html(); 
       beginLen = $.trim($(rte).html()).length; 

       setTimeout(function(){ 
        var text = $(rte).html(); 
        var newLen = $.trim(text).length; 

        //identify the first char that changed to determine caret location 
        caret = 0; 

        for(i=0;i < newLen; i++){ 
         if(_activeRTEData[i] != text[i]){ 
          caret = i-1; 
          break; 
         } 
        } 

        var origText = text.slice(0,caret); 
        var newText = text.slice(caret, newLen - beginLen + caret + 4); 
        var tailText = text.slice(newLen - beginLen + caret + 4, newLen); 

        var newText = newText.replace(/(.*(?:endif-->))|([ ]?<[^>]*>[ ]?)|(&nbsp;)|([^}]*})/g,''); 

        newText = newText.replace(/[·]/g,''); 

        $(rte).html(origText + newText + tailText); 
        $(rte).contents().last().focus(); 
       },100); 
      }); 

body_doc es el iframe editable, si está utilizando un div editable que podría caer el .find ('cuerpo') parte. Básicamente detecta un evento pegar, comprueba que la ubicación limpie el nuevo texto y luego coloca el texto limpio donde lo pegó. (Suena confuso ... pero en realidad no es tan malo como parece.

El setTimeout es necesario porque no puedes tomar el texto hasta que esté pegado en el elemento, pegar eventos se disparan tan pronto como comienza la pegada .

Answer 8

Esto funciona muy bien para eliminar cualquier comentario de texto HTML, incluyendo los de la Palabra:

function CleanWordPastedHTML(sTextHTML) { 
    var sStartComment = "<!--", sEndComment = "-->"; 
    while (true) { 
    var iStart = sTextHTML.indexOf(sStartComment); 
    if (iStart == -1) break; 
    var iEnd = sTextHTML.indexOf(sEndComment, iStart); 
    if (iEnd == -1) break; 
    sTextHTML = sTextHTML.substring(0, iStart) + sTextHTML.substring(iEnd + sEndComment.length); 
    } 
    return sTextHTML; 
} 

Answer 9

Tenía un problema similar con saltos de línea se cuentan como caracteres y tuve que quitarlos.

$(document).ready(function(){ 
 

 
    $(".section-overview textarea").bind({ 
 
    paste : function(){ 
 
    setTimeout(function(){ 
 
     //textarea 
 
     var text = $(".section-overview textarea").val(); 
 
     // look for any "\n" occurences and replace them 
 
     var newString = text.replace(/\n/g, ''); 
 
     // print new string 
 
     $(".section-overview textarea").val(newString); 
 
    },100); 
 
    } 
 
    }); 
 
    
 
});