如何防止css库如tailwindcss和bootstrap影响所见即所得编辑器的html内容(如Tinymce,Ckeditor)?

iaqfqrcu  于 2023-01-10  发布在  Bootstrap
关注(0)|答案(6)|浏览(270)

有一个TinyMCE编辑器,它给我输出正确的html标签,如h1,h2,B,ul,ol,li。

然而,当我想在我自己的前端(由TailWindCSS或Bootstrap组成)中准确地呈现TinyMCE的输出时,每个html标记的每个样式看起来都很普通,大小、边距和填充都相同,就像在普通文本元素中一样。

我发现,这些CSS框架使用类似于“normalize-css”的东西来实现这个外观。然而,尽管我使用Tailwind和/或BootstrapCSS,我如何在我的前端恢复TinyMCE的CSS风格呢?

flvlnr44

flvlnr441#

我使用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;

然后你可以设置一个你在渲染元素上定义的className,如下所示:

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

p3rjfoxz2#

好吧,我必须说,我的答案和Zhongxu给出的答案不会有太大的不同。问题是,我不熟悉@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>
6yt4nkrj

6yt4nkrj3#

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标签将正确呈现。

qgelzfjb

qgelzfjb4#

swyx的“复位”方法对我很有效(https://gist.github.com/sw-yx/28c25962485101ca291ec1947b9d0b3e
1.将动荡类粘贴到你的css中(或者让mix内置它)
1.将TinyMCE中的html放入一个div中,并使用unvolture类

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

owfi6suc5#

我也遇到了同样的问题,但我找到了一个方法。这个方法对我来说很有效,也是最简单的方法。注意我也在django summernote编辑器中使用tailwind css(在任何编辑器上都可以使用),我会在我的工作模板中使用ul和li作为唯一的光盘,所以在我的HTML模板文件中,我添加了:

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

我知道如果你想添加很多ul li元素,比如1,2,3或者I II III,这可能不起作用,但是它可以,至少它比编辑根文件或者配置文件(因为它们对初学者不友好)要好。

fruv7luv

fruv7luv6#

//我想这一定能成功...希望..@顺风基地;
@图层基础{
无尾风基本{

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

} }
@顺风分量;@顺风公用事业;

相关问题