Tweaking WYSIWYG editor for web based email application

Question

I have an email sending web application and for text formatting I need to implement a WYSIWYG editor for email body. I have tried Tinymce and fckeditor but the major problem with these editors being that they output <div> and <span> tags with inline style. Most email clients like outlook and even gmail simply rip off any css and hence they are of no use.

I went ahead with TinyMCE and used the following configuration for font colors:

<script>
    tinyMCE.init({
        theme_advanced_buttons1_add : "forecolor,backcolor",
        tinymce.init({selector:'textarea'});
    });
</script>

As said above, I get <span style="font-color:#ff0000">Text here</span> when I try to add red color to a portion of text. This gets removed by both Gmail and outlook and what the receiver gets is black text. No fonts, no font colors. What mail clients understand is the old <font> tag.

My question: How can I tweak tinymce (or fckeditor) to output <font> tags instead of <span>? I could not find a useful solution in their documentation. It would also help if anyone can suggest any other email friendly text editors out there.

A similar question is here but without a solution: Create a html wysiwyg editor for editing email templates

Answer 1

I know this is an older post, but the current version of TinyMCE has a legacyoutput plugin that will do just that. Just initialize with this option:

tinymce.init({
    plugins: "legacyoutput"
});

Answer 2

There's a sample in CKEditor's package that show how you can configure it to produce font tags instead of span tags.

You can find it in ckeditor/samples/plugins/htmlwriter/outputhtml.html.

Although, AFAIK and according to Guide to CSS support in emails you can freely use some basic styling, but it have to be inline styles.

PS. Recently I started a small project called styliner. This library accepts stylesheet plus HTML and it produces HTML with inline styles. It's not ready yet, but in simple cases it may be already useful.

Answer 3

I would suggest using php str_replace to replace all instances of 'span' with 'font'.

Simple example:

$output = $_POST['yourForm']; // or whatever variable the editor returns
$output = str_replace('span', 'font', $output); // $output now has all instances replaced 

Because the editors are not designed for email, you'll have to run a bunch of functions on them (in addition to limiting their functionality) to output only email friendly html.

Answer 4

@Captain Hypertext's answer correctly answers @Zeeshan's question, but won't fix the primary issue.

As @John mentioned in a comment above, the cause of the issue why the OP @Zeeshan's code wouldn't work in email clients is due to using a CSS property that doesn't exist.

<span style="font-color:#ff0000">Text here</span>    

The above will not be coloured in any email client (nor web browser), as the CSS property font-color is invalid (does not appear in any CSS specification).

<span style="color:#ff0000;">Text here</span>    

The above will work in the majority of email clients and all web browsers as the CSS property color is valid (since CSSv1). This won't work if inside a link in older Outlook email clients though (2007 - 2012 iirc).

Answer 5

You could define that text styling has to be set as a tag in tinymce:

tinyMCE.init({
        // Override internal formats  
        formats: {
            bold : {inline : 'b' },  
            italic : {inline : 'i' },
            underline : {inline : 'u'}
        },
    ...
}