HTML editor removes FreeMarker tags inside <table> tag - html

Question

I use FreeMarker to build various templates from email to invoice templates. Issue that i am seeking right now is related to FreeMarker code being extracted outside table tag since HTML doesn't allow other characters inside it beside tbody, thead, tr.
Would be glad if anyone has an idea how to bypass this.
Example:
<table>
<tbody>
[#assign eventDetails = []]
[#if items?? && items?has_content]
[#list items as item]
<tr>
<td style="padding: 5px;vertical-align: top;border-bottom: 1px solid #eee; text-align: center;">
${item.name}
</td>
</tr>
[/#list]
[/#if]
</tbody>
</table>
become like this after being applied to editor using element.innerHTML:
[#assign eventDetails = []]
[#if items?? && items?has_content]
[#list items as item]
[/#list]
[/#if]
<table>
<tbody>
<tr>
<td style="padding: 5px;vertical-align: top;border-bottom: 1px solid #eee; text-align: center;">
${item.name}
</td>
</tr>
</tbody>
</table>

Answer 1

It of course only depends on the HTML editor you are using, but you should try if same happens if, either:
You are using the <#...> syntax instead. That looks like some unknown tag for the editor, not CDATA, so maybe it doesn't react the same way.
Replace <tbody>...</tbody> with [#html.tbody]...[/#html.tbody]. Then the editor might won't be confident enough to remove stuff. Or, the same with [#html.table], etc. Quite awkward, but might be better than what you have now. (For that to actually work when running the template, you will have to define the tbody macro in the html namespace of course. It's not built in.)
Example of the last:
<#ftl output_format='HTML'>
<#macro table attrs...><#elementWithNested 'table' attrs><#nested></#></#macro>
<#macro tbody attrs...><#elementWithNested 'tbody' attrs><#nested></#></#macro>
<#macro elementWithNested elementName attrs>
<${elementName}<#if attrs?size != 0><#list attrs as k, v> ${k}="${v}"</#list></#if>>
<#nested>
</${elementName}>
</#macro>
If above template is #import-ed as html, then <#html.table foo="bar">...</#html.table> etc. will work.