Using TinyMCE with handlebars template

Question

I am trying to use TinyMCE to allow my users to modify a handlebars report template. The template contains several elements that are not valid to TinyMCE and they are being moved around. See the {{#each data}} and {{/each}}

Here is good HTML code for my handlebars template:

<table class="table table-bordered">
     <thead>
          <tr>
               <th><h4>Item</h4></th>
               <th><h4 class="text-right">Quantity</h4></th>
               <th><h4 class="text-right">Rate/Price</h4></th>
               <th><h4 class="text-right">Sub Total</h4></th>
          </tr>
    </thead>
    <tbody>
        {{#each Details}}
           <tr>
                <td>{{Item}}<br><small>{{Description}}</small></td>
                <td class="text-right">{{Quantity}}</td>
                <td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
                <td class="text-right">{{Amount}}</td>
          </tr>
        {{/each}}  
     </tbody>
</table>

After I past the code into TinyMCE, it results to the following:

{{#each Details}}{{/each}}
<table class="table table-bordered">
<thead>
<tr><th>
<h4>Item</h4>
</th><th>
<h4 class="text-right">Quantity</h4>
</th><th>
<h4 class="text-right">Rate/Price</h4>
</th><th>
<h4 class="text-right">Sub Total</h4>
</th></tr>
</thead>
<tbody>
<tr>
<td>{{Item}}<br /><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
</tbody>
</table>

Has anyone ran across a plugin or something else that may help me?

Andrew Ryan Andrew Ryan · Accepted Answer · 2020-07-09T17:42:12

I just ran into this... I have an order confirmation email that I need to be configurable with a list of order items in a table; same issue.

I did just realize I probably shouldn't be using tables anyway, since they are not responsive, but I ultimately was able to solve the problem with HTML comments, like this:

<tr style="font-weight: bold;">
  <td style="width: 145px;">Qty</td>
  <td>Item</td>
  <td>Unit Price</td>
  <td>Total</td>
</tr>
<!--{{#order.line_items}} -->
<tr repeat="">
  <td style="width: 145px;">{{quantity}}</td>
  <td>{{product.name}}</td>
  <td>{{currency unit_price}}</td>
  <td>{{currency total}}</td>
</tr>
<!--{{/order.line_items}} -->
<tr>
  <td style="width: 145px;">&nbsp;</td>
  <td>&nbsp;</td>
  <td><strong>Subtotal:</strong></td>
  <td>{{currency order.subtotal}}</td>
</tr>

Using TinyMCE with handlebars template

2 Answers