有一个TinyMCE编辑器,它给我输出正确的html标签,如h1,h2,B,ul,ol,li。
然而,当我想在我自己的前端(由TailWindCSS或Bootstrap组成)中准确地呈现TinyMCE的输出时,每个html标记的每个样式看起来都很普通,大小、边距和填充都相同,就像在普通文本元素中一样。
我发现,这些CSS框架使用类似于“normalize-css”的东西来实现这个外观。然而,尽管我使用Tailwind和/或BootstrapCSS,我如何在我的前端恢复TinyMCE的CSS风格呢?
6条答案
按热度按时间flvlnr441#
我使用tailwindcss的@layer来定义base,如下所示:
然后你可以设置一个你在渲染元素上定义的className,如下所示:
p3rjfoxz2#
好吧,我必须说,我的答案和Zhongxu给出的答案不会有太大的不同。问题是,我不熟悉@layer指令,而且提供的答案基本上对我不起作用。因此,我将在下面留下我为解决这个问题而提出的CSS样式,但功劳要归功于@Zhongxu:
6yt4nkrj3#
Talwind Preflight负责此操作。“印前检查”会删除所有边距、填充和每组基本样式。
您可以禁用它
一旦禁用,h1、h2、b、ul、ol、li等html标签将正确呈现。
qgelzfjb4#
swyx的“复位”方法对我很有效(https://gist.github.com/sw-yx/28c25962485101ca291ec1947b9d0b3e)
1.将动荡类粘贴到你的css中(或者让mix内置它)
1.将TinyMCE中的html放入一个div中,并使用unvolture类
owfi6suc5#
我也遇到了同样的问题,但我找到了一个方法。这个方法对我来说很有效,也是最简单的方法。注意我也在django summernote编辑器中使用tailwind css(在任何编辑器上都可以使用),我会在我的工作模板中使用ul和li作为唯一的光盘,所以在我的HTML模板文件中,我添加了:
我知道如果你想添加很多ul li元素,比如1,2,3或者I II III,这可能不起作用,但是它可以,至少它比编辑根文件或者配置文件(因为它们对初学者不友好)要好。
fruv7luv6#
//我想这一定能成功...希望..@顺风基地;
@图层基础{
无尾风基本{
} }
@顺风分量;@顺风公用事业;