Excel/Word Web Table Styles Not Preserved on Paste #429
Description
Excel/Word Web Table Styles Not Preserved on Paste
Description
When pasting content from Excel or Word Web into Froala, table styles (borders, colors, fonts) are not preserved. The copied HTML includes classes like Mso* and Xl*, but Froala does not convert them to inline styles automatically.
What I Tried (I understand)
- The
paste.beforeandpaste.afterevents allow intercepting and modifying content. - However, with Excel/Word Web content, Froala shows a format confirmation modal.
- We cannot access or modify the sanitized content before insertion, so inline styles cannot be applied.
Impact
- Tables lose formatting, affecting visual consistency and user experience.
Request
We are looking for a solution to preserve table styles when pasting Excel/Word Web content, ideally allowing inline styles before the modal appears. Any guidance or workaround is appreciated.
Example
Table copied from Excel:
Table pasted in Froala:
(The table appears as-is in the editor after confirming the formatting in the modal, but we cannot modify the styles before insertion.)
HTML Generated:
<html>
<body>
<!--StartFragment-->
<html>
<head>
</head>
<body link="#467886" vlink="#96607D">
<div ccp_infra_version="3" ccp_infra_timestamp="1758041992736" ccp_infra_user_hash="2050076173" ccp_infra_copy_id="" data-ccp-timestamp="1758041992736">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Excel.Sheet">
<meta name="Generator" content="Microsoft Excel 15">
<style>
table {
mso-displayed-decimal-separator:"\.";
mso-displayed-thousand-separator:"\,";
}
tr
{mso-height-source:auto;
}
col
{mso-width-source:auto;
}
td
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:"Aptos Narrow", sans-serif;
mso-font-charset:1;
text-align:general;
vertical-align:bottom;
border:none;
white-space:nowrap;
mso-rotate:0;}
.xl18
{color:black;
font-size:12.0pt;
font-weight:700;
font-family:Arial, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border:1.0pt solid windowtext;
white-space:normal;}
.xl19
{color:black;
font-size:14.0pt;
font-weight:700;
font-family:Arial, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border-top:1.0pt solid windowtext;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
white-space:normal;}
.xl20
{color:black;
font-size:12.0pt;
font-weight:700;
font-family:Arial, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border-top:1.0pt solid windowtext;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
white-space:normal;}
.xl21
{font-size:12.0pt;
font-family:Calibri, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border-top:none;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
background:#D9D9D9;
mso-pattern:silver none;
white-space:normal;}
.xl22
{font-size:12.0pt;
font-weight:700;
font-family:Calibri, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border-top:none;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
background:#D9D9D9;
mso-pattern:silver none;
white-space:normal;}
.xl23
{font-size:12.0pt;
font-family:Calibri, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border-top:none;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
white-space:normal;}
.xl24
{font-size:12.0pt;
font-weight:700;
font-family:Calibri, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border-top:none;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
white-space:normal;}
.xl27
{font-size:12.0pt;
font-weight:700;
font-family:Calibri, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border:1.0pt solid windowtext;
white-space:normal;}
.xl28
{font-size:12.0pt;
font-weight:700;
font-family:Calibri, sans-serif;
mso-font-charset:1;
text-align:center;
vertical-align:middle;
border:1.0pt solid windowtext;
background:#D9D9D9;
mso-pattern:silver none;
white-space:normal;}
.xl83
{color:black;
font-size:12.0pt;
font-weight:700;
font-family:Arial;
mso-generic-font-family:auto;
mso-font-charset:0;
text-align:center;
vertical-align:middle;
border-top:1.0pt solid windowtext;
border-right:1.0pt solid windowtext;
border-bottom:1.0pt solid windowtext;
border-left:none;
white-space:normal;}
</style>
<div>
<table>
<colgroup>
<col width="102">
<col width="420">
<col width="62" span="6">
</colgroup>
<tbody>
<tr class="xl18"><td></td><td class="xl19">TESTE</td>...</tr>
<tr class="xl28"><td rowspan="2">1</td><td rowspan="2">TESTE</td>...</tr>
<!-- More rows... -->
</tbody>
</div>
</table>
</body>
</html>