将 TinyMCE 与车把模板一起使用答案

【问题标题】：Using TinyMCE with handlebars template将 TinyMCE 与车把模板一起使用
【发布时间】：2015-02-17 04:05:09
【问题描述】：

我正在尝试使用 TinyMCE 来允许我的用户修改车把报告模板。该模板包含几个对 TinyMCE 无效的元素，它们正在被移动。查看 {{#each data}} 和 {{/each}}

这是我的车把模板的好 HTML 代码：

<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>

我将代码传递到 TinyMCE 后，结果如下：

{{#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>

有没有人遇到过插件或其他可能对我有帮助的东西？

【问题讨论】：

您找到解决方案了吗？

标签： tinymce handlebars.js tinymce-4

【解决方案1】：

我刚遇到这个...我有一封订单确认电子邮件，我需要在表格中配置订单项目列表；同样的问题。

我刚刚意识到我可能不应该使用表格，因为它们没有响应，但我最终能够解决 HTML cmets 的问题，如下所示：

<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>

【讨论】：

表格非常适合电子邮件，电子邮件客户端无法生成响应式 CSS。

【解决方案2】：

我能够在我的元素上使用自定义属性并使用：

<tr repeat="{{#each Details}}">
</tr repeat="{{/each}}">

【讨论】：

哇，我花了 10 个小时来解决完全相同的问题。请，更详细的答案将不胜感激。