时间戳

首页 > 解决方案 > 如何在我自己的前端使用适当的样式表渲染来自 TinyMCE 的 HTML？

html - 如何在我自己的前端使用适当的样式表渲染来自 TinyMCE 的 HTML？

问题描述

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

在此处输入图像描述

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

在此处输入图像描述

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

标签： htmlcssbootstrap-4tinymcetailwind-css

解决方案

我使用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" />

推荐阅读