使用TWIG

时间:2015-06-11 11:44:16

标签: php html css symfony twig

我正在尝试为使用Symfony2的平台开发工具。这个工具需要编辑完整的html文件(带有他的html,head和style标签)。

到现在为止,我使用file_get_contents从控制器传递文件的全部内容,它将内容正确传递给客户端。

  • 在PHP控制器上:

当加载包含该工具的页面时,服务器会向控制器接收请求,其中我返回TWIG将在视图上呈现的一些参数。在这种情况下,我返回一些东西需要的某个ID和一个包含模板文件的全部内容的字符串。

$file = file_get_contents($basePath.$this->getTemplate($template_id). '.html.twig');
return array('template_id' => $template_id, 'plantilla' => $file);
  • 在视图上:

TWIG使用' {{}}'用于呈现控制器在请求上返回的参数的表示法。当我传递一个带有html内容的字符串时,TWIG会使用一个过滤器,而不是渲染字符串,而是使用' raw'数据传递,在这种情况下是HTML代码。

<div id='plantilla-content'>
    {{ plantilla | raw }}
</div>

<script>
    tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
        plugins : "fullpage",
        theme_advanced_buttons3_add : "fullpage"
    });
<script>

这是原始邮件模板内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Company</title>
        <style>
            a:hover {
                text-decoration: underline;
            }
            td.promocell p {
                color:#FFFFFF;
                font-size:16px;
                line-height:26px;
                font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
                margin-top:0;
                margin-bottom:0;
                padding-top:0;
                padding-bottom:14px;
                font-weight:normal;
            }
            td.contentblock h4 {
                color:#444444 !important;
                font-size:16px;
                line-height:24px;
                font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
                margin-top:0;
                margin-bottom:10px;
                padding-top:0;
                padding-bottom:0;
                font-weight:normal;
            }
            td.contentblock h4 a {
                color:#444444;
                text-decoration:none;
            }
            td.contentblock p {
                color:#888888;
                font-size:13px;
                line-height:19px;
                font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
                margin-top:0;
                margin-bottom:12px;
                padding-top:0;
                padding-bottom:0;
                font-weight:normal;
            }
            td.contentblock p a {
                color:#3ca7dd;
                text-decoration:none;
            }
            @media only screen and (max-device-width: 480px) {
                div[class="header"] {
                    font-size: 16px !important;
                }
                table[class="table"], td[class="cell"] {
                    width: 300px !important;
                }
                table[class="promotable"], td[class="promocell"] {
                    width: 325px !important;
                }
                td[class="footershow"] {
                    width: 300px !important;
                }
                table[class="hide"], img[class="hide"], td[class="hide"] {
                    display: none !important;
                }
                img[class="divider"] {
                    height: 1px !important;
                }
                td[class="logocell"] {
                    padding-top: 15px !important;
                    padding-left: 15px !important;
                    width: 300px !important;
                }
                img[id="screenshot"] {
                    width: 325px !important;
                    height: 127px !important;
                }
                img[class="galleryimage"] {
                    width: 53px !important;
                    height: 53px !important;
                }
                p[class="reminder"] {
                    font-size: 11px !important;
                }
                h4[class="secondary"] {
                    line-height: 22px !important;
                    margin-bottom: 15px !important;
                    font-size: 18px !important;
                }
            }
        </style>
    </head>
    <body bgcolor="#EEEEEE" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
      <tr>
        <td bgcolor="#EEEEEE" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
          <tr>
            <td width="600" class="cell">

            <table width="600" cellpadding="10" cellspacing="0" border="0" class="table" bgcolor="#e31818" >
              <tr>
                <td width="168" class="logocell">
                <img src="{{ app.request.getSchemeAndHttpHost() }}/{{ app.request.getBasePath() }}/path/logo.png" alt="Plantilla email" width="168" height="54" style="display: block; -ms-interpolation-mode:bicubic;" /></td>
                <td align="center" width="350" class="hide" style="color:#fff;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="middle">
                  <strong>Some text</strong></td>
              </tr>
            </table>
              <br>
              <repeater>
                <layout>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td bgcolor="#e31818" nowrap width="5"></td>
                      <td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
                        <tr>
                          <td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong>
                            <singleline label="Title"></singleline>
                            {{ subject }} </strong> </h4>
                            <multiline label="Description">
                              <p>{{ translate | raw }}</p>
                              {% block fos_user_content %}
                              {% endblock fos_user_content %}
                            </multiline></td>
                        </tr>
                      </table></td>
                    </tr>
                  </table>
                  <br>
                </layout>
              </repeater></td>
          </tr>
        </table>
          <br>
          <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
            <tr>
              <td><br>
                <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
                  <tr>
                    <td width="600" nowrap bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
                      <tr>
                        <td width="380" valign="top" class="footershow"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size: 10px; color: #777;">
                          <tr>
                            <td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> Si recibe este correo electrónico por error, por favor, tenga en cuenta que puede contener información confidencial, por lo tanto, el uso de esta información está estrictamente prohibida.
                              Sírvanse informar al remitente del error y elimine la información recibida.
                              Gracias por su colaboración. </td>
                          </tr>
                          <tr>
                            <td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> If you receive this e-mail by error, please note that it may contain confidential information,therefore, the use of this information is strictly forbidden.
                              Please inform the sender of the error and delete the information received.
                              Thank you for your collaboration. </td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td width="600" nowrap class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
                      <tr>
                        <td align="center" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="top" class="hide"><br>
                          <p>Company © 2014</p></td>
                      </tr>
                    </table></td>
                  </tr>
                </table>
                <br></td>
            </tr>
          </table></td>
      </tr>
    </table>
    </body>
</html>

这就是TWIG实际呈现的内容。如您所见,它与我要编辑的原始内容不匹配。我正在尝试使用TinyMCE编辑整个文件,但工作不正常,CSS没有正确加载,一些标签被忽略。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Company</title>
        <style>
            a:hover {
                text-decoration: underline;
            }
            td.promocell p {
                color:#FFFFFF;
                font-size:16px;
                line-height:26px;
                font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
                margin-top:0;
                margin-bottom:0;
                padding-top:0;
                padding-bottom:14px;
                font-weight:normal;
            }
            td.contentblock h4 {
                color:#444444 !important;
                font-size:16px;
                line-height:24px;
                font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
                margin-top:0;
                margin-bottom:10px;
                padding-top:0;
                padding-bottom:0;
                font-weight:normal;
            }
            td.contentblock h4 a {
                color:#444444;
                text-decoration:none;
            }
            td.contentblock p {
                color:#888888;
                font-size:13px;
                line-height:19px;
                font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
                margin-top:0;
                margin-bottom:12px;
                padding-top:0;
                padding-bottom:0;
                font-weight:normal;
            }
            td.contentblock p a {
                color:#3ca7dd;
                text-decoration:none;
            }
            @media only screen and (max-device-width: 480px) {
                div[class="header"] {
                    font-size: 16px !important;
                }
                table[class="table"], td[class="cell"] {
                    width: 300px !important;
                }
                table[class="promotable"], td[class="promocell"] {
                    width: 325px !important;
                }
                td[class="footershow"] {
                    width: 300px !important;
                }
                table[class="hide"], img[class="hide"], td[class="hide"] {
                    display: none !important;
                }
                img[class="divider"] {
                    height: 1px !important;
                }
                td[class="logocell"] {
                    padding-top: 15px !important;
                    padding-left: 15px !important;
                    width: 300px !important;
                }
                img[id="screenshot"] {
                    width: 325px !important;
                    height: 127px !important;
                }
                img[class="galleryimage"] {
                    width: 53px !important;
                    height: 53px !important;
                }
                p[class="reminder"] {
                    font-size: 11px !important;
                }
                h4[class="secondary"] {
                    line-height: 22px !important;
                    margin-bottom: 15px !important;
                    font-size: 18px !important;
                }
            }
        </style>


    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
      <tbody><tr>
        <td bgcolor="#EEEEEE" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
          <tbody><tr>
            <td width="600" class="cell">

            <table width="600" cellpadding="10" cellspacing="0" border="0" class="table" bgcolor="#e31818">
              <tbody><tr>
                <td width="168" class="logocell">
                <img src="{{ app.request.getSchemeAndHttpHost() }}/{{ app.request.getBasePath() }}/path/logo.png" alt="Plantilla email" width="168" height="54" style="display: block; -ms-interpolation-mode:bicubic;"></td>
                <td align="center" width="350" class="hide" style="color:#fff;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="middle">
                  <strong>company</strong></td>
              </tr>
            </tbody></table>
              <br>
              <repeater>
                <layout>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tbody><tr>
                      <td bgcolor="#e31818" nowrap="" width="5"></td>
                      <td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
                        <tbody><tr>
                          <td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong>
                            <singleline label="Title"></singleline>
                            {{ subject }} </strong> </h4>
                            <multiline label="Description">
                              <p>{{ translate | raw }}</p>
                              {% block fos_user_content %}
                              {% endblock fos_user_content %}
                            </multiline></td>
                        </tr>
                      </tbody></table></td>
                    </tr>
                  </tbody></table>
                  <br>
                </layout>
              </repeater></td>
          </tr>
        </tbody></table>
          <br>
          <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
            <tbody><tr>
              <td><br>
                <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
                  <tbody><tr>
                    <td width="600" nowrap="" bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
                      <tbody><tr>
                        <td width="380" valign="top" class="footershow"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size: 10px; color: #777;">
                          <tbody><tr>
                            <td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> Si recibe este correo electrónico por error, por favor, tenga en cuenta que puede contener información confidencial, por lo tanto, el uso de esta información está estrictamente prohibida.
                              Sírvanse informar al remitente del error y elimine la información recibida.
                              Gracias por su colaboración. </td>
                          </tr>
                          <tr>
                            <td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> If you receive this e-mail by error, please note that it may contain confidential information,therefore, the use of this information is strictly forbidden.
                              Please inform the sender of the error and delete the information received.
                              Thank you for your collaboration. </td>
                          </tr>
                        </tbody></table></td>
                      </tr>
                    </tbody></table></td>
                  </tr>
                  <tr>
                    <td width="600" nowrap="" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
                      <tbody><tr>
                        <td align="center" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="top" class="hide"><br>
                          <p>Company</p></td>
                      </tr>
                    </tbody></table></td>
                  </tr>
                </tbody></table>
                <br></td>
            </tr>
          </tbody></table></td>
      </tr>
    </tbody></table>

如果没有可能操纵原始邮件的结构/格式,怎么可能编辑文件的完整内容?

此外,假设代码被正确接收,我想再次传递给控制器​​中的方法来存储更改,可能使用带有内容的字符串。另一个问题是HTML代码包含干扰字符串形成的简单和双引号符号。

0 个答案:

没有答案