Question

我有一封发送网络应用程序和文本格式的电子邮件，我需要为电子邮件正文实现一个WYSIWYG编辑器。我已经尝试过Tinymce和fckeditor，但这些编辑器的主要问题是它们以内联样式输出<div>和标签。大多数电子邮件客户端，比如outlook甚至gmail，都只是扯掉任何css，因此它们毫无用处。

我继续使用TinyMCE并使用以下配置进行字体颜色：

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

如上所述，当我尝试将红色添加到文本的一部分时，我得到Text here。这可以通过Gmail和Outlook删除，接收者获取的是黑色文本。没有字体，没有字体颜色。邮件客户端了解的是旧的标记。

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

类似的问题在这里，但没有解决方案：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

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

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

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

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

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

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

Answer 5

您可以定义必须将文本样式设置为tinymce中的标记：

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

为基于Web的电子邮件应用程序调整WYSIWYG编辑器

5 个答案: