如何在TinyMCE中编写twig标签

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标签移到桌子外面,打破了我想做的所有逻辑.

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

谢谢您的帮助.

Answer 1

你可以做一些解决方法：

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

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

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

Answer 2

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

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

Answer 3

这对我来说看起来很复杂，因为在</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 文件只是模板而不是最终文档，因此没有逻辑将它们导入 WYSIWYG 编辑器，因为无法呈现无效的 html。我建议您用jinja 模式中使用的 codemirror替换 TinyMCE ，以获得合适的 Twig 编辑器。