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

Question

有一个 TinyMCE-Editor，它给我输出正确的 html 标签，如 h1、h2、b、ul、ol、li。 像这样：

但是，当我想在我自己的前端（由 TailWindCSS 或 Bootstrap 组成）中准确呈现 TinyMCE 的输出时，每个 html 标签的每种样式看起来都非常简单，具有相同的大小、相同的边距、相同的填充，因为它会是在普通的文本元素中。

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

Answer 1

我使用tailwindcss的@layer来定义base，像这样：

// tailwind.scss
@tailwind base;

@layer base {
  // define revert css here
  .no-tailwindcss-base {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: revert;
      font-weight: revert;
    }

    ol,
    ul {
      list-style: revert;
      margin: revert;
      padding: revert;
    }
  }
}

@tailwind components;
@tailwind utilities;

然后您可以设置您在渲染元素上定义的类名。像这样：

<div class="no-tailwindcss-base" />

Answer 2

好吧，我必须说，我的答案和仲旭给出的答案不会有太大的不同。问题是，我不熟悉 @layer 指令，提供的答案基本上对我不起作用。因此，我将在下面留下我想出的 CSS 样式来解开谜团，但归功于@Zhongxu：

@tailwind base;

@layer base {

    .no-tailwindcss-base h1,
    .no-tailwindcss-base h2,
    .no-tailwindcss-base h3,
    .no-tailwindcss-base h4,
    .no-tailwindcss-base h5,
    .no-tailwindcss-base h6 {
        font-size: revert;
        font-weight: revert;
    }

    .no-tailwindcss-base ol,
    .no-tailwindcss-base ul {
        list-style: revert;
        margin: revert;
        padding: revert;
    }
}

@tailwind components;
@tailwind utilities;

<div class="no-tailwindcss-base">
   <!-- Other elements here-->
</div>

Answer 3

Talwind Preflight 对此负责。 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 标签将被正确渲染。

Answer 4

swyx 的“未重置”方法对我有用（https://gist.github.com/sw-yx/28c25962485101ca291ec1947b9d0b3e）

1. 将 unrest 类粘贴到您的 css 中（或混合构建它）
2. 将 TinyMCE 中的 html 放入一个 div 中并使用 unrest 类

<div class="unreset">
    {!! $tinyMCEhtmloutput !!}
</div>

Answer 5

我遇到了同样的问题，但我找到了办法。这种方式对我有用，是最简单的方式。请注意，我也在使用 tailwind css 和 django summernote 编辑器（适用于任何编辑器），我将在我的工作模板中使用 ul 和 li 作为唯一的光盘，所以在我的 HTML 模板文件中，我添加了：

<style> ul{   list-style-type: disc; } </style>

我知道如果您想将许多 ul li 元素添加为 1、2、3 或 I II III，这可能行不通，但它确实有效。至少它比编辑根文件或配置文件要好（因为它们对初学者不友好）。谢谢。

Answer 6

@TheFaultInOurStars 解决方案的小修改。这将减少代码并将 no-tailwindcss-base 应用于所有孩子

@layer base {
    .no-tailwindcss-base, .no-tailwindcss-base * , .no-tailwindcss-base > * {
    font-size: revert;
    font-weight: revert;
    margin: revert;
    display: revert;
    vertical-align: revert;
    max-width: revert;
    height: revert;
    border-width: revert;
    border-style: revert;
    border-color: revert;
    border-style: revert;
    outline: revert;
    list-style: revert;
    padding: revert;
}

}

Answer 7

// 我认为这一定有效……希望…… @顺风基地；

@图层基础{

no-tailwindcss-base{

h1,
h2,
h3,
h4,
h5,
h6`enter code here`{
  list-style: revert;
  margin: revert;
  padding: revert;
}

} }

@tailwind 组件； @tailwind 公用事业；