如何在 TinyMCE 中编写树枝标签

Question

TinyMce 与 Twig 结合使用时遇到问题， 我正在尝试将带有 twig 标签的 html 粘贴到 tinyMce 中。 （使用原始 html）

这就是我想要的结果：

<table>
<thead>
    <tr>
        <th></th>
        {% for period in report.periods %}
            <th>
                {% set per = "last_" ~ period %}
                {{ per | trans({}, "admin") }}
            </th>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for category in report.categories %}
        <tr>
            <td>
                <b>{{ category | trans({}, "admin") }}</b>
            </td>
            {% for period in report.periods %}
                <td>
                    {{ data[category][period] }}
                </td>
            {% endfor %}
        </tr>
    {% endfor %}
</tbody>
</table>

这就是我将它粘贴到 tinyMce 并验证我的 HTML 时的样子

<p>{% for period in report.periods %} {% endfor %} {% for category in report.categories %} {% for period in report.periods %} {% endfor %} {% endfor %}</p>
<table>
<thead>
<tr>
<th></th><th>{% set per = "last_" ~ period %} {{ per | trans({}, "admin") }} </th>
</tr>
</thead> 
<tbody>
<tr>
<td><b>{{ category | trans({}, "admin") }}</b></td>
<td>{{ data[category][period] }}</td>
</tr>
</tbody>
</table>

如您所见，tinyMce 将我的 twig 标签移到表格之外，并破坏了我想做的所有逻辑。

我已经直接在官方网站上尝试了 tinyMce (cleanup : false) 的多个配置以及多个版本 (3.x、4.x)。 但它也不起作用

感谢您的帮助。

Answer 1

使用 TinyMCE 的 protect 选项禁用 TWIG 代码过滤：

tinymce.init({
    protect: [
       /{%(.*)%}/g, // Allow TWIG control codes
       /{{(.*)}}/g, // Allow TWIG output codes
       /{#(.*)#}/g, // Allow TWIG comment codes
    ]
})

Answer 2

你可以做一些解决方法：

<thead>
<tr>
    <th></th>
    <!--{% for period in report.periods %}-->
        <th>
            {% set per = "last_" ~ period %}
            {{ per | trans({}, "admin") }}
        </th>
    <!--{% endfor %}-->
</tr>

对于 TinyMce，它不是无效的。 Twig 用一些额外的空 cmets 渲染它。

<thead>
<tr>
    <th></th>
    <!---->
        <th>
            Result value 1
        </th>
    <!---->
        <th>
            Result value 2
        </th>
    <!---->
</tr>

Answer 3

我遇到了完全相同的问题，TinyMCE 重新排列了 Twig 标签。 我正在使用 v4.1，唯一适用于表中 Twig 标记的解决方案是在 Twig 标记周围添加 HTML 注释，因此您的代码将是这样的

<thead>
<tr>
    <th></th>
    <!-- {% for period in report.periods %} -->
        <th>
            <!-- {% set per = "last_" ~ period %} -->
            <!-- {{ per | trans({}, "admin") }} -->
        </th>
    <!-- {% endfor %} -->
</tr>

我使用<!--TWIG: { my twig tags} :TWIG--> 然后在保存时使用正则表达式删除 cmets。

AFAIK 没有配置选项可以防止在单元格 <td>

之外的表格中重新排列 Twig 标签

Answer 4

这对我来说看起来很复杂，因为在 </td> 和 <td> 之间放置一些内容会导致 HTML 无效。

TinyMCE 是一个所见即所得的 HTML 编辑器，因此它会尝试解释您的 HTML 以呈现结果；正是在这一步，您的原始 HTML 被破坏了。只需尝试在任何浏览器中呈现以下代码：

<table border=1>
  <tr>
    <td>test</td>
    hello
    <td>test</td>
    world
    <td>test</td>
  </tr>
</table>

你会得到类似的东西：

表格范围之外的代码已放在上面，这种行为看起来就像您在验证 TinyMCE 字段时得到的 HTML。

由于 Twig 文件只是模板而不是最终文档，因此无法在所见即所得编辑器上导入它们，因为无法呈现无效的 html。我建议您将 TinyMCE 替换为 codemirror used in jinja mode 以获得合适的 Twig 编辑器。