Saubere Microsoft Word eingefügt Text mit JavaScript

Question

Ich verwende eine 'contenteditable' <div/> und PASTE aktivieren.

Es ist erstaunlich, wie viel Markup-Code aus einer Zwischenablage-Kopie von Microsoft Word eingefügt wird. Ich kämpfe das und habe etwa 1/2 Weg dort mit Prototype 'stripTags() Funktion (Funktion, die leider scheint nicht zu ermöglichen, einige Tags zu halten).

Aber selbst danach komme ich mit einer überwältigenden Menge an nicht benötigtem Markup-Code.

Also meine Frage ist, gibt es eine Funktion (mit JavaScript), oder Ansatz, den ich verwenden kann, wird die Mehrheit dieser nicht benötigten Markup aufräumen?

Answer 1

Hier ist die Funktion, die ich aufgewickelt schriftlich, die die Arbeit ziemlich gut macht (soweit ich das überhaupt sagen kann).

Ich bin sicherlich offen für Verbesserungsvorschläge, wenn jemand irgendwelche hat. Vielen Dank.

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

Ich hoffe, dies ist hilfreich für einige von Ihnen.

Answer 2

Wie wäre es mit einem "Einfügen als einfachen Text" -Taste, die eine <textarea> zeigt, so dass der Benutzer den Text dort einfügen? Auf diese Weise werden alle Tags für Sie entfernt. Das mache ich mit meinem CMS; Ich habe es aufgegeben, Word's Chaos aufzuräumen.

Answer 3

Sie können entweder die volle CKEditor verwenden, die auf Paste reinigt, oder look at the source.

Answer 4

Können Sie in ein verstecktes Textfeld einfügen, aus demselben Textfeld kopieren und in Ihr Ziel einfügen?

Answer 5

Ich hasse es zu sagen, aber ich habe schließlich aufgegeben, damit TinyMCE Word-Mist so verarbeitet, wie ich es möchte. Jetzt habe ich einfach eine E-Mail an mich gesendet, jedes Mal, wenn eine Benutzereingabe bestimmte HTML enthält (suche zum Beispiel nach <span lang="en-US">) und korrigiere es manuell.

Answer 6

Ich habe so etwas vor langer Zeit gemacht, wo ich das Zeug in einem Rich-Text-Editor komplett aufgeräumt und Schriftarten in Stile, brs zu ps, etc, um es zwischen den Browsern konsistent zu halten und bestimmte hässliche Dinge zu verhindern in Via Paste. Ich nahm meine rekursive Funktion und riss das meiste davon raus, mit Ausnahme der Kernlogik, dies könnte ein guter Startpunkt sein ("Ergebnis" ist ein Objekt, das das Ergebnis akkumuliert, das wahrscheinlich einen zweiten Durchlauf benötigt, um in eine Zeichenkette zu konvertieren) das ist, was Sie brauchen:

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

ich benutze diese:

$(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 die editierbare iframe ist, wenn Sie eine editierbare div verwenden Sie könnten die .find Drop-out ('Körper') Teil. Im Grunde erkennt es ein Einfüge-Ereignis, überprüft den Speicherort, bereinigt den neuen Text und platziert den bereinigten Text wieder an der Stelle, an der er eingefügt wurde. (Klingt verwirrend ... aber es ist nicht wirklich so schlimm wie es klingt.

Die setTimeout ist erforderlich, weil Sie den Text nicht greifen können, bis er tatsächlich in das Element eingefügt wird, einfügen Ereignisse einfügen, sobald der Einfügen beginnt .

Answer 8

Dies funktioniert gut alle Kommentare von HTML-Text zu entfernen, die aus Wort einschließlich:

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

hat ein ähnliches Problem mit Zeilenumbrüchen als Zeichen gezählt werden, und ich hatte sie zu entfernen.

$(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); 
 
    } 
 
    }); 
 
    
 
});