问题描述
我在基于 TinyMCE 的项目的一部分中使用 NextJS，并使用 Tailwind 作为 CSS 后处理器。
我想控制生成的 HTML，使其与网站的其余部分对齐，特别是通过其 CSS 类的 Tailwind 样式。这意味着从 TinyMCE 生成的 HTML 需要适当地附加 Tailwind CSS 类。
在我的 TinyMCE 配置中，我有：
...
formats: {
bold: { inline: "span",classes: "font-bold text-2xl" },alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img',classes: 'text-left' },aligncenter: { selector: 'p,classes: 'text-center' },alignright: { selector: 'p,classes: 'text-right' },alignfull: { selector: 'p,classes: 'text-justify' },italic: { inline: 'span',classes: 'italic' },underline: { inline: 'span',classes: 'underline',exact: true },strikethrough: { inline: 'del',classes: 'strikethrough' },},style_formats: [
{ title: 'headings',items: [
{ title: 'heading 1',block: 'h1',classes: ["text-xl font-bold m-2"]},{ title: 'heading 2',block: 'h2',{ title: 'heading 3',block: 'h3',classes: ["text-lg","font-bold","m-2"] },{ title: 'heading 4',block: 'h4',classes: ["text-base",{ title: 'heading 5',block: 'h5',classes: ["text-sm",{ title: 'heading 6',block: 'h6',classes: ["text-xs","m-2"] }
]},...
这确实适用于已识别的实体：生成了类。生成的 HTML 的预览与网站的其余部分保持一致。
然而，实际的编辑区域并不反映样式。例如，通过编辑器应用的 <h1> 将应用正确的类，但不会反映编辑器窗口中的更改。这当然会成为一个问题，因为最终用户希望在编辑时获得实际的 WYSWYG 体验，即使在网站的其他地方单独查看时最终结果是正确的。
我的理解是，我可能需要使用 content_css 并提供将定义类的 CSS 文件的路径。
AFAIK，使用默认的 NextJS-Tailwind 集成，CSS 文件可能无法用作可提供的路径，因为我认为它通过 NextJS 自己的/内置 {{1 }} 解决方案。
另一种可能的解决方案是使用 content_style，它将应用于 TinyMCE 编辑器生成的 css-in-JS。这可能相当乏味，因为我可能需要确定 Tailwind 为所有已识别元素和操作生成的确切样式，并将其放置在配置中。由于数据将保存在 DB 中以供稍后检索，因此将来随时更改配置（一种非常可能的情况）将导致样式不匹配。
我想知道是否还有其他可用的解决方案或选项可供我评估。这种所见即所得的经验非常重要，所以如果没有可行的选择，我什至可以改变核心方法/堆栈（选择退出 Tailwind 和/或 TinyMCE 以及其他替代方案。但是我确实计划坚持使用 NextJS）虽然它如果我能继续使用它们会很棒，因为它们提供了我正在构建的核心的强大功能。
我一点也不热衷于使用内联样式（例如：style='text-align: left'）尽管我可以，如果它除了已知的可能不是站点主题之外没有任何其他主要影响 -友好。
编辑/更新：
所以看起来我确实有一个最小可行的选择，毕竟它可以阻止我评估不断变化的工具。
我使用 Tailwind CLI 命令 Iframe
然后我取回了一个已清除的 CSS（未缩小，但绝对已清除），然后我将其作为静态文件添加到服务器公共目录中。与 TinyMCE 配置中的 npx tailwind build src/styles/tailwind.css -o src/styles/tailwind-built.css 一起，编辑器现在是所见即所得！至少对于我定义的基本样式。
这当然意味着额外的请求/加载绝对是多余的 CSS 文件。幸运的是，我的清除但未缩小的顺风 CSS 文件目前约为 30kb（看到该文件，我估计缩小的文件在 10-15 kb 之间）所以如果没有其他直接的解决方案，这绝对是我的解决方法可用。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）