What are the Slack Archives?
It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.
Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..
I have a problem regarding the WYSIWYG editor in `Zed > Content > Block > Edit Placeholder`
U03D9KKPK2T
Posts: 29 🧑🏻🚀 - Cadet
in Help
I have a problem regarding the WYSIWYG editor in Zed > Content > Block > Edit Placeholder Pages.
It changes my twig loops on save or if I change back to normal view after editing the code in code view.
Is there a place in the code where I can look into its reformatting behaviour or disable it altogether?
I'll put a code example in the thread.
0
Comments
-
Just to demonstrate what's happening:
{% for shipmentGroup in mail.shipmentGroups %} <p>lot of</p><span>valid html</span> {% for item in shipmentGroup.items %} <more> valid </html> {% endif %} {% endif %}That is transformed into this:
{% for shipmentGroup in mail.shipmentGroups %} {% for item in shipmentGroup.items %} {% endif %} <p>lot of</p><span>valid html</span> <more> valid </html> {% endif %}I checked the html for validity using html linting tools after removing twig tags.
0 -
This is the complete file if anyone's wondering.
<table class="sprykerBoxedTextBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"> <![endif]--> <tbody class="sprykerBoxedTextBlockOuter"> <tr> <td class="sprykerBoxedTextBlockInner" valign="top" > <!--[if gte mso 9]> <td align="center" valign="top" "> <![endif]--> <table class="sprykerBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td > <table class="sprykerTextContentContainer" width="100%" cellspacing="0" border="0"> <tbody> <tr> <td class="sprykerTextContent" valign="top"> <h1 ></h1> <h1 > <br /> <span > <strong>{{ 'mail.trans.order_confirmation.title' | trans }}</strong> </span> </h1> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--[if gte mso 9]> </td> <![endif]--> <!--[if gte mso 9]> </tr> </table> <![endif]--> </td> </tr> <tr> <td class="sprykerBoxedTextBlockInner" valign="top" > <!--[if gte mso 9]> <td align="center" valign="top" "> <![endif]--> <table class="sprykerBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td > <table class="sprykerTextContentContainer" width="100%" cellspacing="0" border="0"> <tbody> <tr> <td class="sprykerTextContent" valign="top"> <p > {{ 'mail.trans.common.hello_for_first_name' | trans }} {{ mail.order.customer.firstName }}, </p> <p > {{ 'mail.trans.order_confirmation.subtitle' | trans }} </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--[if gte mso 9]> </td> <![endif]--> <!--[if gte mso 9]> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> <table class="sprykerTextBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="sprykerTextBlockOuter"> <tr> <td class="sprykerTextBlockInner" valign="top"> <!--[if mso]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" > <tr> <![endif]--> <!--[if mso]> <td valign="top" width="600" > <![endif]--> {% for shipmentGroup in mail.shipmentGroups %} <table class="sprykerTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td class="sprykerTextContent" valign="top"> <div ><span ></span></div> </td> </tr> <tr> <td > <table class="sprykerTextContentContainer" width="100%" cellspacing="0" border="0"> <tbody> <tr> <td class="sprykerTextContent" valign="top"> <p>{{ 'mail.trans.order.order_reference' | trans }}: {{ mail.order.orderReference }}</p> <p>{{ 'mail.trans.order.order_date' | trans }}: {{ mail.order.createdAt | date }}</p> <p> {{ 'mail.trans.order.billing_address' | trans }}: {{ mail.order.billingAddress.address1 }} {{ mail.order.billingAddress.address2 }} {{ mail.order.billingAddress.address3 }} {{ mail.order.billingAddress.zipCode }} {{ mail.order.billingAddress.city }} {{ mail.order.billingAddress.region }} </p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td > <table class="sprykerTextContentContainer" width="100%" cellspacing="0" border="0"> <tbody> <tr> <td class="sprykerTextContent" valign="top"> <p>{{ 'mail.trans.order.subtotal' | trans }}</p> <p>{{ 'mail.trans.order.shipment_costs_total' | trans }}</p> {% for shipmentGroup in mail.shipmentGroups %} <p >{{ shipment_method(shipmentGroup.shipment.method) }}</p> {% endfor %} <p>{{ 'mail.trans.order.discounts_total' | trans }}</p> {% for discount in mail.order.calculatedDiscounts %} <p >{{ discount.displayName }}</p> {% endfor %} <p>{{ 'mail.trans.order.taxes' | trans }}</p> <p ><strong>{{ 'mail.trans.order.grand_total' | trans }}</strong></p> </td> <td class="sprykerTextContent" valign="top"> <p ><strong>{{ mail.order.totals.subtotal | default(0) | money }}</strong></p> <p ><strong>{{ mail.order.totals.expenseTotal | default(0) | money }}</strong></p> {% for shipment in mail.order.expenses %} <p ><strong>{{ shipment.sumPriceToPayAggregation | default(0) | money }}</strong></p> {% endfor %} <p> </p> <!-- Invisible character to get the proper space --> {% for discount in mail.order.calculatedDiscounts %} <p ><strong>- {{ discount.sumAmount | default(0) | money }}</strong></p> {% endfor %} <p ><strong>{{ mail.order.totals.taxTotal.amount | default(0) | money }}</strong></p> <p ><strong>{{ mail.order.totals.grandTotal | default(0) | money }}</strong></p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="sprykerTextContent" valign="top"> <div > <span > {{ 'mail.trans.order.shipment_for_number.part1' | trans }} {{ loop.index }} {{ 'mail.trans.order.shipment_for_number.part2' | trans }} {{ mail.shipmentGroups.count() }} </span> </div> <p > {{ 'mail.trans.order.delivery_address' | trans }}: {{ shipmentGroup.shipment.shippingAddress.firstName }} {{ shipmentGroup.shipment.shippingAddress.lastName }}, {{ shipmentGroup.shipment.shippingAddress.address1 }} {{ shipmentGroup.shipment.shippingAddress.address2 }} {{ shipmentGroup.shipment.shippingAddress.address3 }} {{ shipmentGroup.shipment.shippingAddress.zipCode }} {{ shipmentGroup.shipment.shippingAddress.city }} {{ shipmentGroup.shipment.shippingAddress.region }} </p> <p >{{ 'mail.trans.order.delivery_method' | trans }}: {{ shipment_method(shipmentGroup.shipment.method) }}</p> </td> </tr> {% for item in shipmentGroup.items %} <tr> <td > <table class="sprykerTextContentContainer" width="100%" cellspacing="0" border="0"> <tbody> <tr> <td class="sprykerTextContent" valign="top"> <p><strong>{{ item.name }} - {{ 'customer.order.item_sku' | trans }}: {{ item.sku }}</strong></p> <p >{{ 'mail.trans.order.quantity' | trans }}: {{ item.quantity }}</p> </td> <td class="sprykerTextContent" valign="top"> <p ><strong>{{ item.sumPrice | default(0) | money }}</strong></p> </td> </tr> <tr> <td class="sprykerTextContent" colspan="2" valign="top"> {% for option in item.productOptions %} <p >+ {{ option.groupName }}: {{ option.sumPrice | default(0) | money }}</p> {% endfor %} </td> </tr> </tbody> </table> </td> </tr> {% endfor %} </tbody> </table> {% endfor %} <!--[if mso]> </td> <![endif]--> <!--[if mso]> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> <!-- // END TEMPLATE -->0 -
For future reference:
The WYSIWYG editor uses proper JS methods to let the browser render the html before saving (.append()and.innerHTML)
So the browser fails at interpreting twig for loops and such and thus, rearranges the html.All in all: Zed CMS Blocks are not really made for usage with twig.
0
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 76 Spryker News
- 930 Developer Corner
- 788 Spryker Development
- 89 Spryker Dev Environment
- 362 Spryker Releases
- 3 Oryx frontend framework
- 35 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 26 Job Opportunities
- 3.2K 📜 Slack Archives
- 116 Academy
- 5 Business Users
- 370 Docker
- 551 Slack General
- 2K Help
- 75 Knowledge Sharing
- 6 Random Stuff
- 4 Code Testing
- 32 Product & Business Questions
- 70 Spryker Safari Questions
- 50 Random