2

我有一个电子邮件发送 Web 应用程序，对于文本格式，我需要为电子邮件正文实现 WYSIWYG 编辑器。我尝试过 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

4

5 回答 5

5

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

tinymce.init({
    plugins: "legacyoutput"
});
于 2015-10-30T12:41:09.527 回答
1

CKEditor的包中有一个示例，展示了如何配置它以生成font标签而不是span标签。

你可以在ckeditor/samples/plugins/htmlwriter/outputhtml.html.

虽然，AFAIK 并根据电子邮件中的 CSS 支持指南，您可以自由使用一些基本样式，但它必须是内联样式。

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

于 2013-06-05T18:12:22.810 回答
0

我建议使用 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。

于 2013-06-05T15:37:53.390 回答
0

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

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

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

由于 CSS 属性font-color无效（未出现在任何 CSS 规范中），上述内容不会在任何电子邮件客户端（或 Web 浏览器）中 着色。

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

由于 CSS 属性color有效（自 CSSv1 起） ，以上内容适用于大多数电子邮件客户端和所有 Web 浏览器。如果在旧版 Outlook 电子邮件客户端的链接中（2007 - 2012 iirc），这将不起作用。

于 2020-01-13T02:05:33.783 回答
-1

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

tinyMCE.init({
        // Override internal formats  
        formats: {
            bold : {inline : 'b' },  
            italic : {inline : 'i' },
            underline : {inline : 'u'}
        },
    ...
}
于 2013-06-06T13:33:57.943 回答