Pasting from Word into the WYSIWYG editor

Posted by

One important thing to remember when using the WYSIWYG is that it is not a word processor; although very similar it treats text, images, links very different to how your word processor does. So remember a website is not a print document, it is for viewing on screen so certain rules apply.

Pasting content from Microsft Word into the WYSIWYG editor can cause serious problems if it is not done correctly.

Microsoft Word uses hidden syntax to display copy on the page so it displays correctly on your printable document. Your WYSIWYG editor in Mintox also uses hidden syntax (HTML) to display copy on the page correctly formatted for a website.

What does this mean?

Basically, if you copy content from your word document into the WYSIWYG editor with out cleaning away the hidden syntax it will paste invalid HTML markup. It could also paste valid HTML markup (but not correctly formatted for your site) which could effect the layout of your entire site making it unreadable through your web browser and rendering your pages useless.

What do I need to do?

You need to clean any content that you paste into the WYSIWYG editor from a word processing application. The easiest & best method is to click the Paste as Plain Text icon on the WYSIWYG editor. This will remove all the hidden syntax before pasting in the content. However this will also remove all formatting. You will need to go through and reformat the text.

We recommend this as the only way to paste in text from Word as it will not effect the style and layout of your site.

Although this may take a bit longer it will save having to fix issues related to this issue later on.

Why correct formatting is important.

Just to give you an example of the difference between formatted and unformatted word code here is an example of a correctly formatted 2 by 2 table as it appears in HTML code:

<table cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td valign="top">a</td>
<td valign="top">b</td>
</tr>
<tr>
<td valign="top">1</td>
<td valign="top">2</td>
</tr>
</tbody>
</table>

Compare that to this unformatted 2 by 2 table in HTML code with word syntax.

<table>
<tbody>
<tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
<td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0in; BORDER-LEFT: windowtext 1pt solid; WIDTH: 221.4pt; PADDING-TOP: 0in; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt" valign="top" width="295">
<p class="MsoNormal" style="MARGIN: 0in 0in 0pt"><font size="3"><font face="Times New Roman">a<o:p></o:p></font></font></p>
</td>
<td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0in; BORDER-LEFT: #d4d0c8; WIDTH: 221.4pt; PADDING-TOP: 0in; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" valign="top" width="295">
<p class="MsoNormal" style="MARGIN: 0in 0in 0pt"><font size="3"><font face="Times New Roman">b<o:p></o:p></font></font></p>
</td>
</tr>
<tr style="mso-yfti-irow: 1; mso-yfti-lastrow: yes">
<td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0in; BORDER-LEFT: windowtext 1pt solid; WIDTH: 221.4pt; PADDING-TOP: 0in; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" valign="top" width="295">
<p class="MsoNormal" style="MARGIN: 0in 0in 0pt"><font size="3"><font face="Times New Roman">1<o:p></o:p></font></font></p>
</td>
<td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: #d4d0c8; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0in; BORDER-LEFT: #d4d0c8; WIDTH: 221.4pt; PADDING-TOP: 0in; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" valign="top" width="295">
<p class="MsoNormal" style="MARGIN: 0in 0in 0pt"><font size="3"><font face="Times New Roman">2<o:p></o:p></font></font></p>
</td>
</tr>
</tbody>
</table>

 You can see the increase in the amount of code, it’s a coders’ nightmare but if you follow our formatting instructions then you'll have less problems with formatting and a clean, faster loading site.

Category: WYSIWYG Editor