How to write twigs of twins inside TinyMCE

Question

I have a problem with TinyMce in combination with Twig, I am trying to insert html with tweak tags in 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 what it looks like when I paste it into tinyMce and test 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 out of the table and breaks all the logic I wanted to do.

I tried the configuration for individual tinyMce files ( cleanup : false ), as well as versions with several versions (3.x, 4.x) directly on the official website. But that does not work.

Thank you for your help.

Answer 1

This seems complicated for me, because putting something between </td> and <td> will result in invalid HTML.

TinyMCE is a WYSIWYG HTML editor, so it will try to interpret your HTML to render it the way it is received; and at this point your original HTML is broken. Try to display the following code in any browser:

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

You will get something like:

The code outside the table is placed above, this behavior is really similar to the HTML that you get by checking the TinyMCE field.

Since Twig files are just templates, not final documents, there is no logic to import them in the WYSIWYG editor, because the incorrect html simply cannot be displayed. I would recommend that you replace TinyMCE with the codemirror used in jinja mode to get the correct Twig editor.

Answer 2

You can make a workaround:

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

For TinyMce, this is not invalid. Twig renders it with some extra blank comments.

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

Answer 3

Use the protect TinyMCE parameter to disable TWIG code filtering:

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

Answer 4

I had exactly the same problem, TinyMCE reordered Twig tags. I am using v4.1, and only the solution that works for Twig tags in the table adds HTML comment around Twig tags, so your code will 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 deleted comments from regexp when saving.

AFAIK there is no configuration option that would prevent the permutation of Twig tags in the table outside the cell <td>