为基于Web的电子邮件应用程序调整所见即所得编辑器

Question

我有一个发送电子邮件的Web应用程序，对于文本格式，我需要为电子邮件正文实现一个所见即所得的编辑器。我尝试过Tinymce和fckeditor，但是这些编辑器的主要问题是它们以内联样式输出<div>和<span>标签。大多数电子邮件客户端（例如Outlook，甚至gmail）都只是剥夺了所有CSS，因此它们毫无用处。

我继续使用TinyMCE，并对字体颜色使用了以下配置：

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

如上所述，当我尝试将红色添加到文本的一部分时，我得到<span style="font-color:#ff0000">Text here</span>。 Gmail和Outlook都将其删除，并且接收者得到的是黑色文本。没有字体，没有字体颜色。客户端理解的邮件是旧的<font>标签。

我的问题：如何调整tinymce（或fckeditor）以输出<font>标签而不是<span>？我在他们的文档中找不到有用的解决方案。如果有人可以在那里建议任何其他电子邮件友好的文本编辑器，这也将有所帮助。

这里有一个类似的问题，但没有解决方案：Create a html wysiwyg editor for editing email templates

Answer 1

我知道这是一个较旧的文章，但是TinyMCE的当前版本有一个legacyoutput插件可以做到这一点。只需使用此选项进行初始化：

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

Answer 2

CKEditor的程序包中有一个示例，显示了如何配置它以产生font标记而不是span标记。

您可以在ckeditor/samples/plugins/htmlwriter/outputhtml.html中找到它。

尽管，虽然AFAIK并根据Guide to CSS support in emails，您可以自由使用一些基本样式，但是必须是内联样式。

PS。最近，我启动了一个名为styliner的小项目。该库接受样式表以及HTML，并生成带有内联样式的HTML。还没有准备好，但是在简单的情况下，它可能已经有用了。

Answer 3

我建议使用php str_replace将所有'span'实例替换为'font'。

简单示例：

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

因为编辑器不是为电子邮件设计的，所以您必须在它们上运行一堆功能（除了限制其功能），才能仅输出对电子邮件友好的html。

Answer 4

@@ Hypertext上尉的回答正确回答了@Zeeshan的问题，但不能解决主要问题。

正如@John在上面的评论中提到的，OP @Zeeshan的代码在电子邮件客户端中不起作用的原因是由于使用了不存在的CSS属性。

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

以上内容不会在任何电子邮件客户端（也不是网络浏览器）中着色，因为CSS属性font-color无效（不会出现在任何CSS规范中）。

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

以上内容可在大多数电子邮件客户端和所有Web浏览器中使用，因为CSS属性color有效（since CSSv1）。如果在旧版Outlook电子邮件客户端中的链接内（2007年-2012年iirc），则无法使用此功能。

Answer 5

您可以定义文本样式必须在tinymce中设置为标签：

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