[Solved] <font> tags removed by HTML Editor

[Ed]

Hi there,

I am using the ASP.NET MVC Editor control in version 2011.2.712, to allow staff to edit an HTML email that is then sent to the customer.  Email clients are notoriously bad at rendering HTML emails (the worst of all being Outlook 2007...) and I am targetting a wide range of email clients.  This means I have to use the <font> tag rather than <span style="...">.

The issue is that on saving the edited text, the Editor control strips out all <font> tags and replaces them with <span> tags.  This is great for general HTML, but not for HTML emails.

I found the bit of code in the source that does this, and have removed it.  However, I'm wondering if an option to turn this on or off could be added to the editor?

In case you're wondering, the bit of code was in Serializer.js.  This is the offending line:

   

var tagMap = {
    'telerik:script': { start: function (node) { result.push('<script'); attr(node); result.push('>'); }, end: function () { result.push('</script>') } },
    b: { start: function () { result.push('<strong>') }, end: function () { result.push('</strong>') } },
    i: { start: function () { result.push('<em>') }, end: function () { result.push('</em>') } },
    u: { start: function () { result.push('<span style="text-decoration:underline;">') }, end: function () { result.push('</span>') } },
    font: {
        start: function (node) {
            result.push('<span style="');

            var color = node.getAttribute('color');
            var size = fontSizeMappings[node.getAttribute('size')];
            var face = node.getAttribute('face');

            if (color) {
                result.push('color:')
                result.push(dom.toHex(color));
                result.push(';');
            }

            if (face) {
                result.push('font-face:');
                result.push(face);
                result.push(';');
            }

            if (size) {
                result.push('font-size:');
                result.push(size);
                result.push(';');
            }

            result.push('">');
        },
        end: function (node) {
            result.push('</span>');
        }
    }
};

I removed the font { ... } section, and this works great, but will make updating to the next version of the Telerik MVC controls tricky as we'll have to re-apply the change.  Could an option to turn this behaviour on or off be added in a future version?

Cheers,

Ed

[Dimo]

Hi Ed,

Generally we are doing our best to avoid supporting obsolete and invalid HTML tags inside the Editor's content, but if we receive more requests about the described functionality, we will consider implementing some legacy-related behavior.

By the way, I am not convinced you need to use <font> instead of inline font styles. I have built quite a few newsletter HTML pages in the past and never had to resort to <font> tags even for Outlook 2007.

Regards,
Dimo
the Telerik team

[Ed]

Hi Dimo,

Thanks for your reply.  We were advised by our email sending provider that using <font> tags in emails is the safest option for cross-email-client compatibility.  However we can probably work around it for this particular email by adding the inline styles to the <td> tags containing the text instead. 

I'm not sure which (if any) email clients can't deal with <span style="...">, so we'll run some tests to find out.  Hopefully there won't be any, or they'll be sufficiently obscure for it not to matter too much.

Thanks,

Ed