将基于 CSS 类的选项添加到 TinyMCE fontsizeselect答案

【问题标题】：Adding CSS class based options to TinyMCE fontsizeselect将基于 CSS 类的选项添加到 TinyMCE fontsizeselect
【发布时间】：2023-03-06 13:35:01
【问题描述】：

TinyMCE 3 有一个 theme_advanced_font_sizes 设置，它支持使用 CSS 类而不是字面大小添加字体大小选项，因此您可以执行“Big=.big,Small=.small”之类的操作，然后将这些类添加为特定的 CSS字体大小和行高组合。 https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x@theme_advanced_font_sizes/

我试图弄清楚如何在 TinyMCE 5 中做同样的事情，但一切都让我回到了似乎不支持类定义的 fontsizeselect 和 fontsize_formats。

我在这里错过了一个明显的技巧吗？

【问题讨论】：

标签： javascript tinymce tinymce-5

【解决方案1】：

TinyMCE 5 具有fontsize_formats 设置，您仍然可以按照您引用的 TinyMCE 3.x 文档中的建议使用文本。例如：

fontsize_formats: 'small medium large alpha=8pt beta=10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt'

...导致这个：

【讨论】：

谢谢，但我想要的是向文本添加类而不是字体大小样式的选项。例如，在 Tiny 3 版本中，Medium=.medium 将添加 class="medium" 而不是 style="font-size:16px"。那么我可以做 .medium { font-size:16px;line-height:22px; }
简而言之，我希望字体大小 dropfield 也设置一个与所选大小相称的行高。我曾经在 Tiny 3 中通过将大小选项附加到类来做到这一点，但在 Tiny 5 中似乎无法做到这一点。

【解决方案2】：

根据文档、此处发布的答案缺乏以及我过去几天的努力，我得出的结论是，这在 Tiny 5 中是不可能的。Tiny 3 的字体大小选择器让我们可以使用类而不是文字font-size 样式，但我现在不认为这是一种选择。至少没有内置的大小下拉字段。一个设计成看起来像原生选择器的自定义下拉字段可能会起作用。

最后，与其为每个大小选项创建类并像我想要的那样定义绝对字体大小和行高值，在这种情况下，因为它实际上只是我想要定义的行高，我已经最终使用 line-height:calc(1em + 10px); 为段落、标题、列表项等设置样式这似乎运作良好。这样，我的 line-height 总是比选定的 font-size 大 10px。诀窍是对元素和它可能最终得到的任何内部跨度都执行此操作，因为 Tiny 为自定义字体大小添加了这些。

所以基本上，这对我有用：

#site-body p,
.mce-content-body p {
    font-size: 18px;
    line-height: calc(1em + 10px);
}

#site-body p span,
.mce-content-body p span {
    line-height: calc(1em + 10px);
}

在 TinyMCE 配置中使用标准的 fontsize_formats 行：

fontsize_formats: "14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px",

我仍然对其他解决方案感兴趣以供将来参考，因为使用这种方法我不能例如将行高保持在 30 像素，直到字体大小增加到超过 25 像素，然后开始修饰它。使用 per-option 类只是提供了更多的控制权。

【讨论】：