分享CK Editor常用CSS规则，在CKEditor外正确显示格式化文本

Question

假设我们在 CKEdtitor 中添加了图像并将其右对齐：

CKEditor 会将 image 和 image-style-align-right 类添加到 figure 元素：

<p>Lorem ipsum of something like this&nbsp;</p>
<figure class="image image-style-align-right">
    <img src="https://XXXXX.com/116cc956-4cf4-4d2a-98cf-ffa69ab0eb3c.jpeg">
</figure>

现在我们要输入的HTML通过邮件提交？以上HTML必须提交给后台，那么所有的样式都必须转为内联CSS。但是后端如何知道 .image、.image-style-align-right 和类似的 CSS 规则？

@ckeditor/ckeditor5-image 包的 theme/imagestyle.css 文件中有以下样式：

/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

:root {
    --ck-image-style-spacing: 1.5em;
}

.ck-content {
    & .image-style-side {
        float: right;
        margin-left: var(--ck-image-style-spacing);
        max-width: 50%;
    }

    & .image-style-align-left {
        float: left;
        margin-right: var(--ck-image-style-spacing);
    }

    & .image-style-align-center {
        margin-left: auto;
        margin-right: auto;
    }

    & .image-style-align-right {
        float: right;
        margin-left: var(--ck-image-style-spacing);
    }
}

问题1：源样式在前端，由PostCSS

编写

首先，上面的代码是PostCSS。因为我不能仅仅因为使用 CKEditor 就迁移到 PostCSS，所以我不能将这个文件包含到我由其他 CSS 预处理器编写的源代码中。在前端，the Webpack compiles these styles 在应用程序启动时动态应用它（我的意思是，没有已编译 CSS 的文件可用）：

但是如何将这些样式调到服务器？

问题 2：如何仅将这些 CSS 类带到服务器，哪些将被使用而不是更多？

好吧，即使我将上面的.image-style-side 、.image-style-align-center等转换为CSS并提交给服务器，我也仅用于图像功能就足够了。但是其他 CKEdtitor 插件添加了其他 CCS 类并且这些类在许多其他文件中！

С相反，有很多 CKEditor 类我们在后端不需要，例如。 G。 ck-editor__editable、ck-rounded-corners、ck-editor__editable_inline：类用于 CKEditor 的 GUI，一旦编辑完成就不需要了？

问题 3：CSS 变量

上面的清单包括 CSS 变量，如 --ck-image-style-spacing、--ck-image-style-spacing 等。要使内联 CSS，服务器也必须知道它们。

Answer 1

正如您所说，您采用的方法有几个主要的耗时问题需要解决。成功的电子邮件模板的关键是与许多不同的电子邮件客户端的兼容性。电子邮件客户端支持古老的 HTML 标签，例如用于创建布局的 <table>。内联样式也是首选。许多现代 CSS 属性根本不受支持。例如，某些客户端不兼容边框半径，因此圆形按钮实际上是按钮图像而不是代码。也不会渲染不同的字体。

如果我是你（如果 CKEditor 没有电子邮件模板），我会 post 你创建的模板到那里的一些自由职业者平台并说 'guys, how much to convert this HTML to email compatible HTML'。这是最快和最便宜的方式。通过在电子邮件中发送并在不同的电子邮件客户端中检出来测试生成的代码。

另一种方式是让您了解创建 HTML 和电子邮件样式的全部内容。好的起点是从您收到的 HTML 电子邮件中分析（并可能重复使用）HTML，比方说，您的本地手机服务提供商。您需要对该主题进行研究以找出适合您需求的内容，但这里有一些基本准则：

分享CK Editor常用CSS规则，在CKEditor外正确显示格式化文本

Sharing the common CSS rules of CK Editor for correct displaying of the formatted text outside the CKEditor

css

ckeditor

ckeditor5

问题1：源样式在前端，由PostCSS

问题 2：如何仅将这些 CSS 类 带到服务器，哪些将被使用而不是更多？

问题 3：CSS 变量

问题 2：如何仅将这些 CSS 类带到服务器，哪些将被使用而不是更多？