如何防止tailwindcss和bootstrap等css库影响所见即所得编辑器的html内容（如Tinymce、Ckeditor）？

Question

拥有 TinyMCE 编辑器，它为我提供了正确的 html 标签输出，例如 h1、h2、b、ul、ol、li。像这样：

然而，当我想在我自己的前端（由 TailWindCSS 或 Bootstrap 组成）中准确渲染 TinyMCE 的输出时，每个 html 标签的每种样式看起来都非常简单，具有相同的大小、相同的边距、相同的填充，就像在一个普通的文本元素。

我发现，这些 CSS 框架使用“normalize-css”之类的东西来实现这种外观。但是，尽管我使用的是 Tailwind 和/或 BootstrapCSS，如何在前端恢复 TinyMCE 的 CSS 样式？

Answer 1

Talwind Preflight负责此工作。印前检查会删除所有边距、填充和每组基本样式。

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

您可以禁用它

// tailwind.config.js
module.exports = {
  corePlugins: {
   preflight: false,
  }
}

一旦禁用，像 h1、h2、b、ul、ol、li 这样的 html 标签将被正确渲染。