wysihtml5: Kopieren von Text aus einem Word-Dokument in den Editor

Question

Beim Kopieren von Text aus dem Word in den wysihtml5 editor wird der Text durcheinander gebracht (sowohl in Bezug auf die Formatierung als auch in Bezug auf zusätzliche hinzugefügte Zeichen). Gibt es eine einfache Lösung dafür? Das richtige Verhalten, nach dem ich suche, wäre die Art und Weise, wie der Rich-Text-Editor von Stack Overflow funktioniert - der Text, der aus Word kopiert und eingefügt wurde, sah genauso aus wie das Word-Dokument.

Vielen Dank!

Update: Um die Probleme mit der Formatierung des eingefügten Wort Text beobachtet zu lösen, habe ich die Linie "p": {}, in der verwendeten wysihtml5-0.30_rc2.js Datei. Die Zeile wurde in der Deklaration der defaultOptions [parserRules] [tags] (see used resource) hinzugefügt.

Noch jetzt kann ich am Anfang des eingefügten Text eine „Font Definitions“ Absatz siehe:

<!-- /* Font Definitions */ @font-face {font-family:Arial; panose-1:2 11 6 4 2 2 2 2 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; mso-hyphenate:none; font-size:11.0pt; font-family:Arial; mso-fareast-font-family:Arial; mso-bidi-font-family:Arial; color:black; mso-fareast-language:HI; mso-bidi-language:HI;} a:link, span.MsoHyperlink {mso-style-unhide:no; mso-style-parent:""; color:navy; mso-ansi-language:#00FF; mso-fareast-language:#00FF; mso-bidi-language:#00FF; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 
90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} --> 

Dies geschieht nur, wenn ich Firefox verwenden, und geschieht nicht in Chrome. Irgendwelche Ideen, wie man dieses Problem loswerden kann?

Answer 1

wysihtml5 enthält einen Parser, der den gesamten Text analysiert, der in seinen Textbereich eingefügt wird, und wendet die Filterregeln an, die im Konfigurationsobjekt parserRules definiert sind. Hinzufügen von "style": { "remove": 1 } zu Ihrem parserRules sollte den Trick tun.

Um das Firefox-Problem zu verstehen, müssen Sie den rohen Zwischenablage-HTML-Inhalt (der aus Word stammt) sehen, der in den Textbereich eingefügt wird. Das Kopieren von Word-Text und das Einfügen in einen Texteditor hilft nicht, da der Texteditor eine Nur-Text-Variante des Inhalts der Zwischenablage anfordert.

Wenn Sie auf einem Mac sind, können Sie diese rohe Zwischenablage Inhalt mit Hilfe der ClipboardViewer tool sehen, die Sie mit XCode kompilieren müssen. Der gewünschte HTML-Inhalt sollte in den Feldern public.html oder Apple HTML pasteboard type liegen. Vielleicht gibt es andere Tools, die nicht kompiliert werden müssen und/oder die auf anderen Betriebssystemen funktionieren.

Jetzt sollten Sie sehen, dass Ihr Inhalt der Zwischenablage aus Word sieht tatsächlich so etwas wie

<span> 
    <!-- 
     /* Font Definitions */ 
     ... 
     div.WordSection1 {page:WordSection1;} 
     ... 
    --> 
    </span> 

So durch den style-Tag zu entfernen (mit all seinen Inhalten) die Schriftdefinition Junk verschwindet.

Werfen Sie einen Blick auf wysihtml5’s parserRule demo, um einige erweiterte Konfigurationsoptionen zu sehen.

Answer 2

Ich habe dies durch Überschreiben wysihtml5.dom.getPastedHtml gelöst. Füge das einfach hinzu, nachdem du wysihtml5 geladen hast:

wysihtml5.dom.getPastedHtml = function(event) { 
    var html; 
    if (event.clipboardData) { 
    html = event.clipboardData.getData('text/plain'); 
    } 
    return html; 
};