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将我的树枝标签移到桌子外面，打破了我想做的所有逻辑。

我已经在官方网站上直接尝试过tinyMce（cleanup : false）和几个版本（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

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

TinyMCE是一个WYSIWYG HTML编辑器，所以它会尝试解释你的HTML来呈现它，因为它会产生;在这一步，您的原始HTML已被破坏。只需在任何浏览器中尝试呈现以下代码：

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

你会得到类似的东西：

enter image description here

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

由于Twig文件只是模板而不是最终文档，因此无法在WYSIWYG编辑器中导入它们，因为无法呈现无效的html。我建议你用codemirror used in jinja mode取代TinyMCE来获得一个合适的Twig编辑器。

Answer 3

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

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

Answer 4

我有完全相同的问题，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>

我使用然后在保存时使用regexp删除注释。

AFAIK 没有配置选项可以阻止重新排列单元格<td>外的表格中的Twig标记

如何在TinyMCE中编写twig标签

4 个答案: