Jak pisać znaczniki gałązki wewnątrz TinyMCE

Question

Mam problem z TinyMce w połączeniu z Twig, Próbuję wkleić html z tagami twig w tinyMce. (Przy użyciu surowego html)

tutaj jest to, co chcę w wyniku:

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

Jak to wygląda, kiedy wkleić go do TinyMCE i zatwierdź mój 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> 

jak ty widzę, tinyMce przesuwa moje tagi z gałązkami poza stół i łamie całą logikę, którą chciałem zrobić.

Próbowałem konfiguracji severals dla tinyMce (cleanup : false), a także wersje partycji (3.x, 4.x) bezpośrednio na oficjalnej stronie. Ale to nie działa

Dziękuję za pomoc.

Answer 1

Wydaje mi się to skomplikowane, ponieważ umieszczenie czegoś pomiędzy </td> i <td> spowoduje, że będzie to nieprawidłowy kod HTML.

TinyMCE jest edytorem HTML WYSIWYG, więc spróbuje zinterpretować kod HTML, aby go wyrenderować; i na tym etapie twój oryginalny HTML jest zepsuty. Wystarczy spróbować, w dowolnej przeglądarce, aby uczynić następujący kod:

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

dostaniesz coś takiego:

kodeksu z zakresu tabeli został umieszczony powyżej, zachowanie to naprawdę wygląda jak HTML, który otrzymujesz podczas sprawdzania poprawności pola TinyMCE.

Ponieważ pliki Twig są tylko szablonami, a nie dokumentami końcowymi, nie ma logiki do importowania ich do edytora WYSIWYG, ponieważ nie można wyrenderować nieprawidłowego html. Poleciłbym zastąpić TinyMCE przez codemirror used in jinja mode, aby uzyskać odpowiedni edytor Twig.

Answer 2

Można zrobić obejście:

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

Dla TinyMCE nie jest nieważny. Twig renderuje go z kilkoma dodatkowymi pustymi komentarzami.

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

Answer 3

Zastosowanie protect opcja TinyMCE aby wyłączyć filtrowanie kodów gałązka:

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

Answer 4

miałem dokładnie ten sam problem, TinyMCE rozmieszczanie znaczników gałązka. Używam v4.1 i jedynym rozwiązaniem, które działa dla tagów gałązka w tabeli dodaje HTML komentarz wokół tagów Twig tak Twój kod byłoby coś takiego

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

użyłem <!--TWIG: { my twig tags} :TWIG--> następnie usunąć komentarze z regexp przy zapisywaniu .

AFAIK nie ma opcji config które uniemożliwiłyby rozmieszczanie znaczników gałązka w tabeli poza komórką <td>