TailwindCSS 和 CKEditor 5 对齐图像时的干扰

Question

我有一个 Laravel 10 项目，使用 Vite 作为资产构建器。我使用 Tailwind 作为 CSS，所以我的

app.css

看起来像这样：

@tailwind base;
@tailwind components;
@tailwind utilities;

现在我正在使用 CKEditor 5 作为所见即所得编辑器来开发文本编辑功能。我正在使用各种插件，这里最相关的是文本对齐和图像。 CKEditor 是使用 online builder 构建的。

在文本编辑器中，对齐方式按预期工作：

将此内容保存到数据库会得到以下 html：

<h1>Title</h1>
<p>content</p>
<figure class="image image_resized" style="width:10.78%;">
<img style="aspect-ratio:1200/1248;" 
    src="http://laravel.test/storage/images/posts/1200px-Laravel.svg_1708936664.png" 
    width="1200" 
    height="1248">
</figure>

但是，将内容保存到数据库，然后在加载了

app.css

的任何位置显示内容时，对齐不起作用。

这是一个例子：

@vite('resources/css/app.css')

<h1>Title</h1>
<p>content</p>
<figure class="image image_resized" style="width:10.78%;">
<img style="aspect-ratio:1200/1248;"
    src="http://laravel.test/storage/images/posts/1200px-Laravel.svg_1708936664.png" 
    width="1200" 
    height="1248">
</figure>

这给出了以下输出： 尺寸看起来正确，但没有居中对齐。

我猜测对于编辑器本身来说，CKEditor 的 CSS 类是在 Javascript 中的某个位置设置的，而在渲染纯 html 内容时这些类会被 Tailwind 覆盖（或不存在？）。 非常感谢任何有关如何解决此问题的帮助！

附注将内容加载为纯 html（不加载

app.css

）也并不总是正确呈现。这实际上取决于是否对图像应用了任何文本对齐方式，即使如此，调整大小也并不总是正确的。例如，上面没有

@vite()

行的代码片段给出以下输出：

Answer 1

事实证明答案确实相当简单并且记录在here。

您可以将 CKEditor 内容样式导入到应用程序的其他部分，以便在渲染内容时，Javascript 中设置的任何类也可用。