How to write twig tags inside TinyMCE

Question

I have an issue with TinyMce combined with Twig, I'am trying to paste html with twig tags into tinyMce. (using raw html)

here is what i want as a result :

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

This is how it looks like when I paste it into tinyMce and validate my 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>

As you can see, tinyMce moves my twig tags outside the table and break all the logic i wanted to do.

I have tried severals configuration for tinyMce ( cleanup : false ) and also severals versions (3.x, 4.x) directly in the official site. But it does not work either

Thank you for your help.

Answer 1

You can do some workaround:

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

For TinyMce it is not invalid. Twig render it with some extra empty comments around.

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

Answer 2

Use protect option of TinyMCE to disable filtering of TWIG codes:

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

Answer 3

This looks complex to me, as to put something between </td> and <td> will result as invalid HTML.

TinyMCE is a WYSIWYG HTML editor, so it will try to interpret your HTML to render it as it will result; and this is at this step that your original HTML is broken. Just try, in any browser, to render the following code:

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

You will get something like:

Code out of the table scope has been placed above, this behaviour really looks like the HTML you get while validating your TinyMCE field.

As Twig files are just templates and not final documents, there is no logic to import them on a WYSIWYG editor, as invalid html just can't be rendered. I would recommand you to replace TinyMCE by codemirror used in jinja mode to get a proper Twig editor.

Answer 4

I had exactly the same problem, TinyMCE rearranging Twig tags. I'm using v4.1 and only solution which is working for Twig tags in table is adding HTML comment around Twig tags so your code would be something like this

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

I used <!--TWIG: { my twig tags} :TWIG--> then remove comments with regexp on save.

AFAIK there is no config option which would prevent rearranging Twig tags in table outside of cell <td>