I have users that require to copy and paste from word (or excel) into a textarea to display on an internal webpage with a background (so I cannot use a picture of the data as the background will not display). The text they are copying has colors and standard fonts.
Is there an easy way to have the users copy from word/excel to a textarea and keep the formatting?
Below is a sample of the text they are using after copying it from word and fine tuning the coloring and spacing:
<table align="center" border="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="margin: auto auto auto 4.65pt; width: 422pt; border-collapse: collapse; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt;" width="563">
<tbody>
<tr style="height: 33.75pt; mso-yfti-irow: 0; mso-yfti-firstrow: yes;">
<td colspan="2" nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 422pt; height: 33.75pt; background-color: transparent;" width="563">
<p align="center" class="MsoNormal" style="margin: 0in 0in 0pt; text-align: center; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">Day</font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 1;">
<td colspan="2" nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 422pt; height: 33.75pt; background-color: transparent;" width="563">
<p align="center" class="MsoNormal" style="margin: 0in 0in 0pt; text-align: center; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">Date<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 2;">
<td colspan="2" nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 422pt; height: 33.75pt; background-color: transparent;" width="563">
<p align="center" class="MsoNormal" style="margin: 0in 0in 0pt; text-align: center; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">OSP #</font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 3;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">TIME1<o:p></o:p></font></span></b></font></p>
</td>
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 1<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 4;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<font size="160"> </font></td>
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in -10pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 1B<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 6;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">Time2<o:p></o:p></font></span></b></font></p>
</td>
<td nowrap="nowrap" style="background: rgb(146, 205, 220); border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 7pt;margin-top:7pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Actvity 2<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 6;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<font size="160"> </font></td>
<td nowrap="nowrap" style="background: rgb(250, 191, 143); border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 2B<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 7;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">Time3<o:p></o:p></font></span></b></font></p>
</td>
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt; background-color: transparent;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity3<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 8;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<font size="160"> </font></td>
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt; background-color: transparent;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 3B<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 10;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">Time4<o:p></o:p></font></span></b></font></p>
</td>
<td nowrap="nowrap" style="background: rgb(250, 191, 143); border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 7pt;margin-top:7pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 4<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 10;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<font size="160"> </font></td>
<td nowrap="nowrap" style="background: rgb(146, 205, 220); border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 4B<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 11;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri">Time5<o:p></o:p></font></span></b></font></p>
</td>
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 5<o:p></o:p></font></span></b></font></p>
</td>
</tr>
<tr style="height: 33.75pt; mso-yfti-irow: 12; mso-yfti-lastrow: yes;">
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 126.95pt; height: 33.75pt; background-color: transparent;" width="169">
<font size="160"> </font></td>
<td nowrap="nowrap" style="border-color: rgb(240, 240, 240); padding: 0in 5.4pt; width: 295.05pt; height: 33.75pt;" width="393">
<p class="MsoNormal" style="margin: 0in 0in 0pt; line-height: normal;">
<font size="160"><b><span new="" style="font-size: 24pt; mso-ascii-font-family: Calibri;" times=""><font face="Calibri"><span style="mso-spacerun: yes;"> </span>- Activity 5B<o:p></o:p></font></span></b></font></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This is a very involved process and is more like writing an application than solving a simple copy/paste operation. It’s also going to involve JavaScript, plugins, or flash if you want it to work in a browser.
Since you haven’t mentioned anything about reinventing wheels, the best answer, in my opinion, is to utilize a rich text editor with “paste from word” support, such as YUI Rich Text Editor or TinyMCE.
Here is a nice post about cleaning up word format when pasting into YUI.
Hopefully that will give you a nice intro to this very involved topic.