從Word複製到textarea保持格式

Question

我有一些用戶需要從word（或excel）複製粘貼到textarea中，以在背景的內部網頁上顯示（所以我不能使用數據的圖片作爲背景不會顯示）。他們正在複製的文本具有顏色和標準字體。

有沒有一種簡單的方法讓用戶從word/excel複製到textarea並保持格式？

下面是他們是從文字和微調的顏色和間距將其複製後使用文本樣本：

<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;">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</span>- Activity 5B<o:p></o:p></font></span></b></font></p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 

      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

這是一個非常複雜的過程，更像是比解決一個編寫的應用程序簡單的複製/粘貼操作。如果您希望它在瀏覽器中工作，它也將涉及JavaScript，插件或Flash。

由於您沒有提及有關重新發明輪子的任何內容，在我看來，最好的答案是利用a rich text editor with "paste from word" support，如YUI Rich Text Editor或TinyMCE。

這是一個關於cleaning up word format when pasting into YUI的好帖子。

希望這會給你一個很好的介紹這個非常涉及的話題。