title: Editing Twig templates in CKeditor
body: <p>I'm trying to allow admin users to edit email templates. These templates are stored in the DB as <a href="http://twig.sensiolabs.org/" rel="noreferrer">Twig</a> ones. So the variables in them are set as <code>{{ purchase.number }}</code> and there are loops like </p>
  
  <pre><code>    {% if cart['shipping'] %}
          {% for line in cart['shipping'] %}
              &lt;tr&gt;
                  &lt;td colspan="7"&gt;Shipping ({{ line['text'] }})&lt;/td&gt;
                  &lt;td&gt;US${{ line['money'] }}&lt;/td&gt;
              &lt;/tr&gt;
          {% endfor %}
      {% endif %}
  </code></pre>
  
  <p>Below is one of the templates where I can reproduce this issue:</p>
  
  <pre><code>        &lt;html&gt;
      &lt;body&gt;
          &lt;h3&gt;Order #{{ purchase.number }} was cancelled&lt;/h3&gt;
          &lt;p&gt;Order content:&lt;/p&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Line&lt;/th&gt;
                  &lt;th&gt;Item #&lt;/th&gt;
                  &lt;th&gt;Product Name&lt;/th&gt;
                  &lt;th&gt;Shipping&lt;/th&gt;
                  &lt;th&gt;UOM&lt;/th&gt;
                  &lt;th&gt;Unit Price&lt;/th&gt;
                  &lt;th&gt;Quantity&lt;/th&gt;
                  &lt;th&gt;Subtotal&lt;/th&gt;
              &lt;/tr&gt;
              {% for line in cart['cart'] %}
                  &lt;tr&gt;
                      &lt;td&gt;{{ line['LineNo'] }}&lt;/td&gt;
                      &lt;td&gt;{{ line['ItemNo'] }}&lt;/td&gt;
                      &lt;td&gt;{{ line['ProductName'] }}&lt;/td&gt;
                      &lt;td&gt;{{ line['Shipping'] }}&lt;/td&gt;
                      &lt;td&gt;{{ line['UOM'] }}&lt;/td&gt;
                      &lt;td&gt;US${{ line['UnitPrice'] }}&lt;/td&gt;
                      &lt;td&gt;{{ line['Quantity'] }}&lt;/td&gt;
                      &lt;td&gt;US${{ line['Subtotal'] }}&lt;/td&gt;
                  &lt;/tr&gt;
              {% endfor %}
              {% if cart['shipping'] %}
                  {% for line in cart['shipping'] %}
                      &lt;tr&gt;
                          &lt;td colspan="7"&gt;Shipping ({{ line['text'] }})&lt;/td&gt;
                          &lt;td&gt;US${{ line['money'] }}&lt;/td&gt;
                      &lt;/tr&gt;
                  {% endfor %}
              {% endif %}
              &lt;tr&gt;
                  &lt;td colspan="7"&gt;&lt;b&gt;Order Item Total:&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;US${{ cart['total'] }}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I just open a page with CKEditor textarea with this template in it, I do <strong>no changes</strong> to the template and just click on "Source" button and here is how the above mentioned template looks after the click:</p>
  
  <pre><code>&lt;h3&gt;Order #{{ purchase.number }} was cancelled&lt;/h3&gt;
  
  &lt;p&gt;Order content:&lt;/p&gt;
  {% for line in cart[&amp;#39;cart&amp;#39;] %} {% endfor %} {% if cart[&amp;#39;shipping&amp;#39;] %} {% for line in cart[&amp;#39;shipping&amp;#39;] %} {% endfor %} {% endif %}
  
  &lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th&gt;Line&lt;/th&gt;
              &lt;th&gt;Item #&lt;/th&gt;
              &lt;th&gt;Product Name&lt;/th&gt;
              &lt;th&gt;Shipping&lt;/th&gt;
              &lt;th&gt;UOM&lt;/th&gt;
              &lt;th&gt;Unit Price&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Subtotal&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;{{ line[&amp;#39;LineNo&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;{{ line[&amp;#39;ItemNo&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;{{ line[&amp;#39;ProductName&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;{{ line[&amp;#39;Shipping&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;{{ line[&amp;#39;UOM&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;US${{ line[&amp;#39;UnitPrice&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;{{ line[&amp;#39;Quantity&amp;#39;] }}&lt;/td&gt;
              &lt;td&gt;US${{ line[&amp;#39;Subtotal&amp;#39;] }}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="7"&gt;Shipping ({{ line[&amp;#39;text&amp;#39;] }})&lt;/td&gt;
              &lt;td&gt;US${{ line[&amp;#39;money&amp;#39;] }}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="7"&gt;&lt;b&gt;Order Item Total:&lt;/b&gt;&lt;/td&gt;
              &lt;td&gt;US${{ cart[&amp;#39;total&amp;#39;] }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Notice that not only single quote changes to html code, but the main thing is that loops are moved, so it used to be:</p>
  
  <pre><code>        {% if cart['shipping'] %}
              {% for line in cart['shipping'] %}
                  &lt;tr&gt;
  </code></pre>
  
  <p>but becomes:</p>
  
  <pre><code>{% for line in cart[&amp;#39;cart&amp;#39;] %} {% endfor %} {% if cart[&amp;#39;shipping&amp;#39;] %} {% for line in cart[&amp;#39;shipping&amp;#39;] %} {% endfor %} {% endif %}
  </code></pre>
  
  <p>Why does CKEditor change the source if these entities are NOT html and I don't do any changes, I don't even focus on the field. </p>
  
  <p>I tried using these CKEditor config options:</p>
  
  <pre><code>CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
  CKEDITOR.config.entities = false;
  
  CKEDITOR.config.forcePasteAsPlainText = false; // default so content won't be manipulated on load
  CKEDITOR.config.basicEntities = true;
  CKEDITOR.config.entities = true;
  CKEDITOR.config.entities_latin = false;
  CKEDITOR.config.entities_greek = false;
  CKEDITOR.config.entities_processNumerical = false;
  CKEDITOR.config.fillEmptyBlocks = function (element) {
      return true; // DON'T DO ANYTHING!!!!!
  };
  </code></pre>
  
  <p>But I still experience this. Can anyone advise on the config option or any other workaround, except for not using WYSIWYG. I tried to convince users to edit html/twig, but the just want WYSIWYG. Thanks</p>