Pasting MS Word copy into your website WYSIWYG editor

Posted October 21st, 2009 by admin

If you want to paste copy originating from a MS Word document into the TinyMCE 3.2.4.x WYSIWYG editor, you need to clean it up before posting to your site. This is because MS Word adds a bunch of junk (formatting information) that will break the visual coherence of your site and make it VERY VERY HARD to restyle in the future. To solve this problem, TinyMCE includes a nice optional toolbar button called "Paste from Word" which will clean it up, but if that's unavailable, after you paste your copy from MS Word into your editor, select all, then change Format to Paragraph, then manually add back in the formatting. Try to use only the block styles available in the editor - it's a pull-down menu called FORMAT.

Tangential Note: We use Wysiwyg Drupal Module on our sites - a cool module which supports several kinds of client-side editors, and allows you to assign an editor to each input format (e.g. Filtered, full HTML, and PHP). Therefore you get to manage all your editors in one place, and you could have several different editors running on a single Drupal install...

If you use the WYSIWYG FORMAT styles in your content it will be in turn VERY EASY to change the visual style of your site via CSS. If you don't clean up your MS WORD content before posting it to your site, it will certainly cost you HOURS and HOURS of work (depending on the number of nodes that have to be cleaned up) at some point to go through each page stripping inline styles pasted from the MS WORD document and replacing with standard block format tags like , h1, h2, h3, h4, <p>, etc.

The caviat here is if you know what you're doing, and use standard block styles in your MS Word documents (i.e. Header 1, Header 2, etc.), then what you paste from MS Word will probably be ok, but many people are ignorant of the benefit of using style sheets in MS Word or CSS in general making this point moot.

Here's an example of some stuff pasted from MS Word that didn't use standard elements:

<p>Version:1.0 StartHTML:0000000105 EndHTML:0000004530 StartFragment:0000002411 EndFragment:0000004494  <!-- /* Font Definitions */ @font-face {font-family:"Courier New"; panose-1:0 2 7 3 9 2 2 5 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:50331648 0 0 0 1 0;} @font-face {font-family:Wingdings; panose-1:0 5 2 1 2 1 8 4 8 7; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 16 0 0 -2147483648 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:Times;} p.MsoBodyText, li.MsoBodyText, div.MsoBodyText {margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:16.0pt; font-family:Times; font-weight:bold;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1700545628; mso-list-type:hybrid; mso-list-template-ids:1729668366 328713 197641 328713 66569 197641 328713 66569 197641 328713;} @list l0:level1