Admin editor breaking newsletter template

[rbrtsluk]

Hi i'm using Foundation for emails 2 to create an email newsletter template.

When i paste all my html in the template, then head over to create my campaign email send off a test all looks great.

As soon as I start doing some client edits in the (still beta) admin editor like replacing some images there is a problem!!

If I go into the html side of it and manually replace the image src="#" then all looks great.

Looks like the beta admin editor is adding to my code when I update an image, as I use the old crappy editor and I don't get this problem:

OLD EDITOR

NEW BETA EDITOR

Is there a way i can use the new editor without it adding to my code when I insert an image?

[rbrtsluk]

ok I have worked out the admin editor is adding html space to my code when i'm placing an image. How do I stop BC from adding html like this?

<th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0"> &nbsp ; </th>

[rbrtsluk]

If I setup to use in context editor it works fine but I can't understand why the beta editor and the old editor add html to my code when I save And how do I fix it?

..........Anyone?

[Robert_K__Bell · Accepted solution]

It's hard to give a specific answer to a general question.

In general, WYSIWYGs modify html to 'fix' it; try to vary the source html such that it doesn't trigger such 'fixes', or work with the changes it makes.

[rbrtsluk]

Ok thanks Robert was hoping you could turn off the 'fixing' in BC. What are your thoughts on InContext editor?

I've only just started looking at it but I don't want the easy way out as i'm trying to teach myself BC and web.

Could I get your opinion on how to best setup email templates and what is easier for clients to use.

Is it just best to setup templates that have the modules so they can select and send or do you have clients that like to change images and text manually?

I will most likely setup both but at the moment it's hard to get anything to run smooth on BC.

Thanks for your help mate.

Luke

[rbrtsluk]

Update on what I have found with this problem is:

Using Foundation for emails you need to add a <th class="expander"></th> for full width on small screens.

This is where BC is adding the space

<th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"> &nbsp ; </th>

so the only way for a client to be able to edit the email is to set up inContext editor and if they make an edit in the (beta) admin editor it's broken.

I'm yet to try something in BC without having to climb a wall to get it to work it really does my head in!!

[rbrtsluk]

..and i'm still trying to work out how to get around BC fixing in the newsletter template editor.

I have a problem with it moving mo module now.

This is my code

<div ice:editable="section">

    <table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%">

        <tbody>

            <tr style="padding: 0; text-align: left; vertical-align: top">

                {module_blogsitepost rowCount="2" template="/Layouts/Email/email-blog-posts-2col.tpl"}

                <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">

                    <tbody>

                        <tr style="padding: 0; text-align: left; vertical-align: top">

                            <td height="64px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 64px; font-weight: 300; hyphens: auto; line-height: 64px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">&#xA0;</td>

                        </tr>

                    </tbody>

                </table>

            </tr>

        </tbody>

    </table>

</div>

and when I save it in the template editor in the portal it moves the module out of the table.

<div ice:editable="section">

    {module_blogsitepost rowCount="2" template="/Layouts/Email/email-blog-posts-2col.tpl"}

    <table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%">

        <tbody>

            <tr style="padding: 0; text-align: left; vertical-align: top">

            </tr>

        </tbody>

    </table>

    <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">

        <tbody>

            <tr style="padding: 0; text-align: left; vertical-align: top">

                <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 64px; font-weight: 300; hyphens: auto; line-height: 64px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word"

                    height="64px"> </td>

            </tr>

        </tbody>

    </table>

</div>

if anyone can help me with this would be really appreciated as I won't have any hair left to pull out soon!!!!