HTML editor formatting issues

[Dan_Stevens_]

When composing/editing text in the email editor (using any template, including the “blank” template), text gets incorrectly formatted.  For example, type the following:
 
This is a test <paragraph break here by hitting the enter key>
Another test
 
View the HTML.  It should look like this:
 
<p>This is a test</p>
<p>Another test</p>
 
Now place the cursor in front of the “A” (in “Another”) and click the BACK key to place everything on one line, in the same paragraph.  As soon as I do this, the font changes to Verdana and the size shrinks.  Looking at the HTML, you can see where Marketo magically added <span> tags:
 
<p>This is a test<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;">Another test</span></p>
 
How can we prevent this?  This is going to cause all sorts of issues for our team of global users of the system?  The goal is develop fool-proof email and landing page templates so that our marketers can customize the text to their needs without having to worry about formatting issues like this.

[Anonymous]

Hi, Dan:

I've been playing around with this for the last few days as well, figuring out how the Marketo's rich text editor formats things in code. As with most WYSIWYG editors, there's a significant problem of code bloating. I've encountered that <span> problem as mentioned, random <div> instead of line breaks, and lots of unnecessary empty tags.

The way to solve this problem is to put the formatting that you see in that styling <span> into the wrapping container div, the one you've defined as class "mktEditable."

Create your email template to do that formatting for you in the wrapping, editable <div>:

<div class="mktEditable" id="main_text" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;">
THIS IS WHERE ALL OF YOUR EMAIL CONTENT GOES. Because the styling is done in the containing div, you don't have to worry about any styling below, or styling changing.
</div>

With this email template set up and the styling in the uneditable-div wrapper, you won't have problems with accidentally deleting any styling spans. For the most part, that is... if you want font styled differently than the norm, you'll have to deal with some more styling spans. 

Most of our writers compose emails in MS Word. After they're approved and finalized, our Marketing Operations team has to make them into emails. MS Word has similar hidden-formatting/code-bloating problems. With the styling in the div wrapper, our Marketing Ops team can just copy+paste the email content from MS Word without problems, then go back and add links/font-size changing after the pure text is copied in. Cuts the workflow down significantly, and it also means consistent styling for our emails.


Best,
Edward Unthank
SEO/Web Specialist
Yesler

[Dan_Stevens_]

Thanks Edward.  But even when I include the formatting in the div like you suggested, the same issue takes place (type a couple paragraphs (using <p>, not <br><br>), hit backspace before the second paragraph to create a single paragraph, and that text gets wrapped with a bunch of bloated span formatting - completely different than the rest of the div formatting.

[Nicole_Mossinge]

Hi Edward:

I'm worried that your solution will result in unexpected formatting, as Marketo strips out these DIV tags when the actual email is rendered. The recipient would then receive this email without your formatting, and whatever formatting is left will determine how it's rendered.

The way I would handle this in the template, is to wrap a set of <span> tags around the <div>, and set the formatting in the <span>.

Example:

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;"><div class="mktEditable" id="main_text">
THIS IS WHERE ALL OF YOUR EMAIL CONTENT GOES. Because the styling is done in the containing div, you don't have to worry about any styling below, or styling changing.
</div></span>

[Dan_Stevens_]

This still doesn't solve the issue.  For testing, use the blank template and then modify it with the following:

<span style="font-family: Arial; font-size: 12px;">
<div class="mktEditable" id="main_text">

</div>
</span>

Approve it and then create a new email based on this template.  Use the example I provided in the original post to enter some text.

[Dan_Stevens_]

I just tried these tests in Firefox and was not able to reproduce these issues.  Apparently, these only exist when using Chrome (I'm using the latest version - v. 28).  And I don't even want to try to reproduce it using IE (since we use IE10 and Marketo isn't even accessible).

[Anonymous]

Nicole: 

Thanks for the clarification! I wasn't aware that Marketo strips out divs in final processing. I just checked with a test email, though, and the <div> with styling was not filtered out in the final result—maybe a result of breaking the normal Marketo regex filtering by adding a "style" property?

 

Dan:

Just replicated your problem. It's interesting that the default font is Verdana 10px, and I looked around and haven't found a place to change the default font.

The problem is still the WYSIWYG editor for emails, and Marketo's isn't up to par. I don't think there's a real answer to your problem (bug?), only to work around it. For the cleanest code with fewest headaches, it's probably easier to edit your email's copy in another program and copy+paste the pristine version at the end. Obviously not an ideal solution, but I haven't found an ideal WYSIWYG in... well, ever.

Also very interesting point on only Chrome... now that throws in another mind-boggling piece, since how would that affect the server-side filtering?


Best,
Edward Unthank
SEO/Web Specialist
Yesler

[Michelle_Tizian]

This was a problem for me when I was copying and pasting from Word.  I usually highlight what I pasted in the text editor and use the clear formatting icon (the one that looks like an eraser), or after I paste content to the text editor, I go to HTML editor and remove the span tags, or I just paste content in HTML editor, so the formatting doesn't get lost. 

[Anonymous]

Have any of you had issues being able to cut and paste into the content editor? I'm trying to paste in my e-mail content from the MS word (through Notepad to get rid of formatting) and it's not letting me CTRL + paste into the field. It WILL let me paste into the HTML area behind the conent editor, but I've been told that tha's not ideal. Any ideas?

[Anonymous]

THe issues with the email editor are unacceptable. I don't have time to labor over simple emails. Fix it.