TinyMCE 自定义内容 CSS

Question

我正在使用 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 returns 样式表正确的人。

我不太了解 TinyMCE 是如何做到这一点的。我应该如何为我的内容使用自定义样式表？

Answer 1

这里真正的问题是...

"how do I send an email and properly apply the CSS that I want to the content of that email"

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

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

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

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

这在 TinyMCE 中更干净、更容易设置，并且有两个主要优点：

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

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

注意：我并不是说 Juice 库是好是坏——它只是可以完成这项工作的各种库之一仅用作示例。

Answer 2

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

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

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

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

TinyMCE 自定义内容 CSS

TinyMCE custom content CSS

html

css

tinymce