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

Posted 2023-03-07

【中文标题】如何在我自己的前端使用适当的样式表渲染来自 TinyMCE 的 HTML？

【英文标题】：How to render HTML coming out of TinyMCE with proper stylesheets in my own frontend?

【发布时间】：2021-05-24 22:58:27

【问题描述】：

有一个 TinyMCE 编辑器，它可以输出适当的 html 标签，如 h1、h2、b、ul、ol、li。 像这样：

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

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

【问题讨论】：

您能否确认您在第二个屏幕截图中呈现的内容与编辑器内容具有相同的 HTML？换一种说法，您能否确认保留了来自 TinyMCE 的 HTML 内容，并且您没有呈现纯文本内容？

是的！确实。它具有相同的html。但是由于 normalize-css 是 TailwindSS 和 Bootstrap 的一部分，它会被规范化到这个

【参考方案1】：

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标签将被正确渲染。

【参考方案2】：

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

【参考方案3】：

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

将 unrest 类粘贴到您的 CSS 中（或混合构建） 将 TinyMCE 中的 html 放入 div 并使用 unrest 类

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

【参考方案4】：

// 我认为这必须有效......希望...... @tailwind 基地；

@层基础

no-tailwindcss-base

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

@tailwind 组件； @tailwind 实用程序；

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。