wysihtml5: Copying text from a word document to the editor

Question

When copying text from word to the wysihtml5 editor, the text gets messed up (both in term of formatting and in terms of additional added characters). Is there an easy fix for this? The correct behavior I am looking for would be the way Stack Overflow's rich-text editor works - the text copied and pasted from word looked identical to the word document.

Thank you!

Update: To solve the problems observed with the formatting of the pasted word text, I added the line "p": {}, in the used wysihtml5-0.30_rc2.js file. The line was added in the declaration of the defaultOptions[parserRules][tags] (see used resource).

Still, now I can see at the beginning of the pasted text a "Font Definitions" paragraph:

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

This only happens when I use Firefox, and does not happen in Chrome. Any ideas on how to get rid of this problem?

Answer 1

wysihtml5 includes a parser that analyses all text that gets pasted in its text area and applies the filter rules that are defined in the parserRules config object. Adding "style": { "remove": 1 } to your parserRules should do the trick.

To understand the Firefox problem, you have to see the raw clipboard HTML content (originating from Word) that gets pasted into the text area. Just copying some Word text and pasting it into a text editor won’t help because the text editor requests a text-only variant of the clipboard content.

If you’re on a Mac you can see this raw clipboard content with the help of the ClipboardViewer tool that you have to compile yourself with XCode. The desired HTML content should be in the public.html or Apple HTML pasteboard type fields. Maybe there exist other tools that don’t need to be compiled and/or that work on other operating systems.

Now you should see that your clipboard content from Word actually looks something like

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

So by removing the style tag (with all of its content) the font definition junk disappears.

Have a look at wysihtml5’s parserRule demo to see some more advanced configuration options.