Ckeditor 5 removing styling from table tag sent from backend in Angular [duplicate]

Backend Template


<div class="closure-certificate">
<table style="width: 100%; border: none">
<tr style="border: none">
<td style="text-align: left; border: none">
<img style="width: 150px; height: auto" src="${brandLogo}" alt="Brand Logo" />
</td>
<td style="text-align: right; border: none">
<img style="width: 150px; height: auto" src="${bankLogoUrl}" alt="City Bank Logo" />
</td>
</tr>
</table>

<div style="margin-top: 20px">
<p style="margin: 5px 0"><span>Ref:</span> ${accountId}</p>
<p style="margin: 5px 0">${date}</p>
</div>

<div style="margin-top: 20px">
<p style="margin: 5px 0">${name}</p>
<p style="margin: 5px 0">${address}</p>
</div>

<div style="margin-top: 20px">
<p style="margin: 5px 0">
<span>Subject:</span> Closure of Nano-Loan Account Number
</p>
<p style="margin: 5px 0"><span>Ref:</span> ${accountId}</p>
</div>

<div style="margin-top: 20px">
<p style="margin: 5px 0">Dear Sir/Madam,</p>
<p style="margin: 5px 0">
Please be informed that your below facility with City Bank PLC. has been
fully settled and you have no remaining liability against the facility
with us.
</p>
</div>

<div style="margin-top: 20px">
<p style="margin: 5px 0"><span>Facility details:</span></p>
<table style="
width: 100%;
border-collapse: collapse;
border-style: solid;
border-color: black;
border-width: 1px;
">
<tbody>
<tr>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
width: 50%;
">
Nano-loan account ID
</td>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
${accountId}
</td>
</tr>
<tr>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
Customer name
</td>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
${name}
</td>
</tr>
<tr>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
NID number
</td>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
${NID}
</td>
</tr>
<tr>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
Loan amount
</td>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
${loanAmount}
</td>
</tr>
<tr>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
Disbursement date
</td>
<td style="
border-style: solid;
border-color: black;
border-width: 1px;
padding: 8px;
">
${disbursementDate}
</td>
</tr>
</tbody>
</table>
</div>

<div style="margin-top: 20px">
<p style="margin: 5px 0">
This certificate is being issued at the request of you without any risk
and prejudice on the part of this bank or any official of the bank.
</p>
</div>

<div style="margin-top: 20px">
<p style="margin: 5px 0">
Thanks again for banking with City Bank and we look forward to serving you
again.
</p>
<p style="margin: 20px 0; text-align: center">
[This is a digital copy and requires no signature]
</p>
</div>

<div style="margin-top: 80px; color: #666; font-size: 14px">
<p style="margin: 5px 0">City Bank PLC</p>
<p style="margin: 5px 0">
City Bank Center, 28, Gulshan Avenue, Gulshan – 1, Dhaka – 1212,
Bangladesh
</p>
</div>
</div>

After populating the template in Ckeditor


<div class="closure-certificate">
<figure class="table" style="width:100%;">
<table style="border-style:none;">
<tbody>
<tr style="border-style:none;">
<td style="border-style:none;text-align:left;"><img style="height:auto;width:150px;" src="${brandLogo}" alt="Brand Logo"></td>
<td style="border-style:none;text-align:right;"><img style="height:auto;width:150px;" src="${bankLogoUrl}" alt="City Bank Logo"></td>
</tr>
</tbody>
</table>
</figure>
<div style="margin-top:20px;">
<p style="margin:5px 0;"><span>Ref:</span> ${accountId}</p>
<p style="margin:5px 0;">${date}</p>
</div>
<div style="margin-top:20px;">
<p style="margin:5px 0;">${name}</p>
<p style="margin:5px 0;">${address}</p>
</div>
<div style="margin-top:20px;">
<p style="margin:5px 0;"><span>Subject:</span> Closure of Nano-Loan Account Number</p>
<p style="margin:5px 0;"><span>Ref:</span> ${accountId}</p>
</div>
<div style="margin-top:20px;">
<p style="margin:5px 0;">Dear Sir/Madam,</p>
<p style="margin:5px 0;">Please be informed that your below facility with City Bank PLC. has been fully settled and you have no remaining liability against the facility with us.</p>
</div>
<div style="margin-top:20px;">
<p style="margin:5px 0;"><span>Facility details:</span></p>
<figure class="table" style="width:100%;">
<table style="border-collapse:collapse;border-color:black;border-width:2px;">
<tbody>
<tr>
<td style="border-color:black;border-width:2px;padding:8px;width:50%;">Nano-loan account ID</td>
<td style="border-color:black;border-width:2px;padding:8px;">${accountId}</td>
</tr>
<tr>
<td style="border-color:black;border-width:2px;padding:8px;">Customer name</td>
<td style="border-color:black;border-width:2px;padding:8px;">${name}</td>
</tr>
<tr>
<td style="border-color:black;border-width:2px;padding:8px;">NID number</td>
<td style="border-color:black;border-width:2px;padding:8px;">${NID}</td>
</tr>
<tr>
<td style="border-color:black;border-width:2px;padding:8px;">Loan amount</td>
<td style="border-color:black;border-width:2px;padding:8px;">${loanAmount}</td>
</tr>
<tr>
<td style="border-color:black;border-width:2px;padding:8px;">Disbursement date</td>
<td style="border-color:black;border-width:2px;padding:8px;">${disbursementDate}</td>
</tr>
</tbody>
</table>
</figure>
</div>
<div style="margin-top:20px;">
<p style="margin:5px 0;">This certificate is being issued at the request of you without any risk and prejudice on the part of this bank or any official of the bank.</p>
</div>
<div style="margin-top:20px;">
<p style="margin:5px 0;">Thanks again for banking with City Bank and we look forward to serving you again.</p>
<p style="margin:20px 0;text-align:center;">[This is a digital copy and requires no signature]</p>
</div>
<div style="color:#666;font-size:14px;margin-top:80px;">
<p style="margin:5px 0;">City Bank PLC</p>
<p style="margin:5px 0;">City Bank Center, 28, Gulshan Avenue, Gulshan – 1, Dhaka – 1212, Bangladesh</p>
</div>
</div>


Here, while populating in ckeditor the table tag gets wrapped inside figure tag and the table styling is being removed.

I tried overriding styling in external CSS file for the UI view. But for sending payload for backend the value gets different as CKeditor manipulate the html template.

Continue reading...