I am trying to develop tool for a platform that uses Symfony2. This tool needs to edit the full html file (with his html,head and style tags).
By now, i am passing the whole content of the file from the controller using file_get_contents, it passes the content correctly to the client.
- on the PHP contoller:
When loading the page that contains the tool, the server receives a petition to controller, where i return some parameters that TWIG will render on the view. In this case i return a certain id needed for some stuff and a string that contains the whole content of the template file.
$file = file_get_contents($basePath.$this->getTemplate($template_id). '.html.twig');
return array('template_id' => $template_id, 'plantilla' => $file);
- on the view:
TWIG uses the '{{ }}' notation to render the parameters returned by the controller on the petition. As I passed a string with a html content, TWIG features a filter that instead of rendering a string, renders the 'raw' data passed, in this case the HTML code.
<div id='plantilla-content'>
{{ plantilla | raw }}
</div>
<script>
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "fullpage",
theme_advanced_buttons3_add : "fullpage"
});
<script>
this is the original mail template content :
<!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>
And this, is what TWIG is actually rendering. As you see, it does not match the original content that i want to edit. I am trying to use TinyMCE to edit the whole file but is not working properly, the CSS is not being loaded properly and some tags are being omited.
<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>
Without the possibility to manipulate the structure/format of the original mail, how could be possible to edit the full content of the file?
Also, taking that the code is received correctly, i want to pass again to a method in the controller to store the changes, maybe using a string with the content. The other problem is that the HTML code contains simple and double quote simbols that interfer with the formation of the string.