TinyMCE 自定义内容 CSS答案

【问题标题】：TinyMCE custom content CSSTinyMCE 自定义内容 CSS
【发布时间】：2020-03-20 13:32:48
【问题描述】：

我正在使用 TinyMCE 让我的用户发送电子邮件，但我不希望这些图像超过最大宽度，因此我尝试使用规则设置 content_css 选项：

img {
    max-width: 100%;
}

img.logo {
    max-height: 300px;
}

这就是我初始化 TinyMCE 的方式：

tinymce.init({
    selector: '#id_body',
    height: 500,
    content_css: '/static/css/content.css',
    plugins: 'advlist link image lists autolink',
    toolbar: `undo redo | styleselect | bold italic | image | numlist bullist
                | alignleft aligncenter alignright alignjustify | outdent indent`,
    image_description: false,
    relative_urls: false,
    images_upload_handler: function (blobInfo, success, failure) {
        // my handler
    }
});

但是，在发送测试电子邮件时，很明显这些样式并未应用于电子邮件正文中的图像。我希望/static/css/content.css 包含在内容中，但是在检查tinymce.get('id_body').getContent() 时根本不包含它。所以这显然是没有应用样式的原因：没有加载样式表。对于那些想知道http://somedomain.org/static/css/content.css 正确返回样式表的人。

我不太了解 TinyMCE 是如何完成这项工作的。我应该如何为我的内容使用自定义样式表？

【问题讨论】：

标签： html css tinymce

【解决方案1】：

这里真正的问题是……

"我如何发送电子邮件并将我想要的 CSS 正确应用到该电子邮件的内容”

这是（就其本身而言）一个广泛的主题，有多种答案，但我会告诉您我们的客户最成功的地方是什么 - 在内容作为电子邮件。

当您在 TinyMCE 中处理内容时，content_css 设置允许您将 CSS 注入您正在编辑内容的<iframe>。然而，那个 CSS 仍然是一个外部样式表。如果您要查看在 TinyMCE 中创建的 HTML，您会看到您创建的 HTML（例如 <p>I am a paragraph</p>），但 CSS 仍然是外部化的。这对 TinyMCE 非常有用，因为它允许您将内容与其显示特征分开，但这对于发送电子邮件并不好，因为许多电子邮件客户端不允许您在 HTML 电子邮件中传递外部样式表。

缓解这种情况的一种谨慎方法是在 TinyMCE (content_css) 中使用外部 CSS 进行内容创作，然后使用 Juice (https://github.com/Automattic/juice) 等工具以编程方式将内联样式添加到内容中就在发送电子邮件之前。

如果您这样做，您可以为 TinyMCE 设置外部 CSS，以便在 Web 浏览器中内容看起来完全符合您的需要。然后，您可以将 TinyMCE 中的 HTML 与外部 CSS 一起传递给 Juice 等工具，它将“内联”所有 CSS。您可以通过电子邮件发送此修改后的 HTML。

这在 TinyMCE 中更简洁、更容易设置，并具有两个主要优点：

数据库中内容的大小会更小，因为 HTML 将不再包含所有内联 CSS。
您可以稍后选择更改外部 CSS，所有未来的电子邮件都会神奇地采用新外观，因为 CSS 会在邮件发送前动态内联。

整个主题实际上非常庞大和复杂，因此我会花一些时间研究有关 HTML 电子邮件的选项和当前最佳实践（它们经常变化）。了解您希望支持的电子邮件客户端以及它们支持的 HTML/CSS 本身就很让人抓狂。

注意：我并不是说 Juice 库是好是坏 - 它只是可以完成这项工作的各种库之一，并且被单独使用举个例子。

【讨论】：

【解决方案2】：

如果您需要在发送电子邮件时应用您的 css 样式，请使用：

tinyMCE.init({
    ...
    valid_children : "+body[style],+body[div]"
});

然后像往常一样将您的 css 样式添加到 html 标记中。

查看文档：https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@valid_children/

【讨论】：